A clear
propriedade está diretamente relacionada a carros alegóricos. Se o elemento puder caber horizontalmente no espaço próximo a outro elemento que está flutuando, ele o fará. A menos que você aplique clear
a esse elemento na mesma direção do flutuador. Em seguida, o elemento se moverá para baixo do elemento flutuante.
Aqui está um exemplo simples de um layout construído com flutuadores, o que pode ser problemático para o rodapé:


Mas, ao limpar o elemento de rodapé, o layout se ajusta ao lugar:
#footer ( clear: both; )


Nesse caso, desmarque: ambos; foi usado para garantir que o rodapé limpe os elementos passados que estão flutuando em qualquer direção. Mas você também pode limpar um dos dois left
ou right
, nesse caso, o elemento se moverá abaixo dos elementos que flutuaram naquela direção, mas não na outra.


Uma maneira comum de limpar os floats é aplicar um pseudo-elemento a um elemento de contêiner que limpa o float. Saiba mais sobre isso aqui.
Suporte para navegador
A clear
propriedade funciona em todos os navegadores.