Propriedade Clear resolve problemas de flutuação

Como vimos no post anterior, elementos flutuantes são removidos do fluxo do documento e não exercem nenhum efeito sobre os elementos adjacentes. Mas aplicar a propriedade clear a um elemento abre um espaço vertical para todos os elementos flutuantes anteriores.
Está propriedade ajuda e muito em layouts e resolve problemas de layouts que foram criados com a propriedade position:absolute que trataremos em artigos futuros.
Suponhamos que você deseje criar um layout de 3 colunas. Você usaria um DIV Contêiner (para abrigar suas DIVs), um DIV menu esquerda, DIV conteúdo e DIV menu direita.
Vamos ao exemplo:

Código XHTML
<div id=”moldura”> -- este é o DIV contêiner
<div id=”menuesquerda”></div>
<div id=”conteudo”></div>
<div id=”menudireita”></div>
</div> -- fim da moldura

Código CSS
#moldura {
width:800px;
margin: 0 auto;
padding::0;
}

#menuesquerda {
width:200px;
float:left;
padding: 5px;
margin:0;
}

#conteudo {
width: 400px;
float:left;
padding:0;
margin:0;
}

#menudireita {
width:200px;
float: right;
padding:5px;
margin:0;



Veja o que acontece em tempo realmente quando você flutua um elemento na imagem abaixo.
O elemento moldura está vazio pelas flutuações dos divs. Se você colocar uma cor de fundo no DIV moldura verá que não surtirá efeito algum, pois ele está sem conteúdo pelos floats dados aos elementos dentro dele.
E como fazemos para a DIV moldura inclua os elementos flutuantes? Existem duas maneiras de se fazer isso. Particularmente não vou entrar em detalhes das duas, mas sim da que eu acho mais limpa e segura para todos os navegadores. Iremos utilizar a propriedade CLEAR. Infelizmente, não temos um elemento para aplicarmos a propriedade CLEAR neste documento. Então criaremos um elemento vazio para termos o resultado que queremos. Uma DIV vazia CLEAR.

Código XHTML
<div id=”moldura”> -- este é o DIV contêiner
<div id=”menuesquerda”></div>
<div id=”conteudo”></div>
<div id=”menudireita”></div>
<div class=”clear”></div>
</div> -- fim da moldura

Código CSS
#moldura {
width:800px;
margin: 0 auto;
padding::0;
}

#menuesquerda {
width:200px;
float:left;
padding: 5px;
margin:0;
}

#conteudo {
width: 400px;
float:left;
padding:0;
margin:0;
}

#menudireita {
width:200px;
float: right;
padding:5px;
margin:0;

.clear {
clear: both;}




Temos o resultado que queremos mas a custa de marcação e código estranho. Se no caso existisse um rodapé no documento aplicaríamos clear:both; nele mas quando não houver haverá a necessidade de adicionar marcação não semântica no código. Use uma classe para CLEAR que poderá usala em várias partes do documento. Leia sobre Ids e Classe.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email