Ao usar o layout de página da web DivCSS, flutuadores são frequentemente usados. Muitas coisas ruins podem ser causadas por flutuadores. Limpar os carros alegóricos é obrigatório, e limpar os carros alegóricos dos elementos pais a qualquer momento é considerado um dos bons hábitos ao escrever CSS.
Vejamos o tutorial de hoje. Este é um código-fonte flutuante que não foi limpo. Você não pode ver o fundo amarelo claro do elemento pai ao executar o código.
Exemplo de código-fonte
[www.downcodes.com] <style type="texto/css">
<!–
*{margem:0;preenchimento:0;}
corpo{fonte:36px negrito cor:#F00;text-align:center;}
#layout{plano de fundo:#FF9;}
#esquerda{float:esquerda;largura:20%;altura:200px;fundo:#DDD;altura da linha:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</estilo>
<div id="layout">
<div id="esquerda">Esquerda</div>
<div id="right">Certo</div>
</div>
Conforme mostrado na figura antes de limpar o float:
1. Use rótulos vazios para limpar carros alegóricos Um método que uso há muito tempo é que a tag vazia pode ser uma tag div ou uma tag P. Estou acostumado a usar <P>, que é bastante curto. Muitas pessoas também usam <hr>, mas só precisam limpar a borda para isso, mas em teoria pode ser qualquer tag. Este método consiste em adicionar essa tag ao clear float depois que todos os elementos flutuantes dentro do elemento pai flutuante precisam ser limpos e definir o código CSS para ele: clear:both. A desvantagem desta abordagem é a adição de elementos estruturais sem sentido.
Exemplo de código-fonte
[www.downcodes.com] <style type="texto/css">
<!–
*{margem:0;preenchimento:0;}
corpo{fonte:36px negrito cor:#F00;text-align:center;}
#layout{plano de fundo:#FF9;}
#esquerda{float:esquerda;largura:20%;altura:200px;fundo:#DDD;altura da linha:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{claro: ambos;}
->
</estilo>
<div id="layout">
<div id="esquerda">Esquerda</div>
<div id="right">Certo</div>
<p class="clr">
</div>
Este método resolve efetivamente a desvantagem de ter que adicionar código não intencional, limpando pontos flutuantes em elementos de rótulo vazios. Para usar este método, você só precisa definir a propriedade CSS: overflow:auto no elemento que precisa ser limpo de flutuante e pronto! "zoom:1" é para compatibilidade com o IE6.
Exemplo de código-fonte
[www.downcodes.com] <style type="texto/css">
<!–
*{margem:0;preenchimento:0;}
corpo{fonte:36px negrito cor:#F00;text-align:center;}
#layout{fundo:#FF9;overflow:auto;zoom:1;}
#esquerda{float:esquerda;largura:20%;altura:200px;fundo:#DDD;altura da linha:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</estilo>
<div id="layout">
<div id="esquerda">Esquerda</div>
<div id="right">Certo</div>
</div>
Este método se aplica apenas a navegadores não-IE. Consulte os exemplos a seguir para métodos de escrita específicos. Preste atenção aos seguintes pontos durante o uso. 1. Neste método, height:0 deve ser definido para o pseudo objeto que precisa limpar o elemento flutuante, caso contrário o elemento será vários pixels maior que o valor real 2. O atributo content é necessário, mas seu valor pode ser; vazio, azul discussão ideal Neste método, o valor do atributo content é definido como ".", mas descobri que também é possível deixá-lo vazio.
Exemplo de código-fonte
[www.downcodes.com] <style type="texto/css">
<!–
*{margem:0;preenchimento:0;}
corpo{fonte:36px negrito cor:#F00;text-align:center;}
#layout{plano de fundo:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#esquerda{float:esquerda;largura:20%;altura:200px;fundo:#DDD;altura da linha:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</estilo>
<div id="layout">
<div id="esquerda">Esquerda</div>
<div id="right">Certo</div>
</div>
Conforme mostrado na figura após flutuação clara:
Cada um desses três métodos tem vantagens e desvantagens, e você deve escolher o melhor ao usá-los. Em comparação, o segundo método é mais preferível.
