Claro - CSS-Tricks

Anonim

A clearpropriedade 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 cleara 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 leftou 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 clearpropriedade funciona em todos os navegadores.