Aprenda Layout com CSS
A propriedade clear é importante para controlar o comportamento de elementos flutuantes. Compare estes dois exemplos:
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
Parece que estou flutuando!
</div>
Nesse caso, o elemento section está declarado depois do elemento div. No entanto, como o elemento div está definido como float:left o que acontece é: o texto dentro do elemento section envolve o elemento div e no fim o elemento section envolve tudo. Mas e se quiséssemos o elemento section depois do elemento div?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Parece que estou flutuando!
</div>
Utilizando a propriedade clear nós agora movemos essa sessao pra baixo da div flututante. Você utiliza o valor left para limpar elementos flutuando à esquerda. E você também pode limpar para a direita com right e para ambas - both as direções.
