Qual é o uso de style = “clear: both”?

98

Acontece que eu vi um divque tinha o estilo clear:both! Qual é a utilidade de clearem style?

<div style="clear:both">
html css Thomasbabuj
fonte

Respostas:

249

clear:both faz o elemento cair abaixo de quaisquer elementos flutuantes que o precedem no documento.

Você também pode usar clear:leftou clear:rightpara fazê-lo cair abaixo apenas dos elementos que foram flutuados para a esquerda ou direita.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+
RichieHindle
fonte
2
Também faz com que o div pai se ajuste à altura.
Oleg
@Jason, o bug ao qual você se refere só se aplica ao Internet Explorer 6 no Windows XP. É uma coisa boa não precisarmos apoiá-lo na maioria das vezes hoje em dia.
Yevgeniy Afanasyev
5
@YevgeniyAfanasyev, sim, isso é verdade. Meu comentário é de 2009, quando ainda era aplicável.
Jason
20

Apenas para acrescentar à resposta de RichieHindle, verifique Floatutorial , que mostra como funciona a flutuação e limpeza de CSS.

Paul Dixon
fonte
1
Em 15 de fevereiro de 2016, não consegui me conectar ao servidor para Floatutorial (conexão recusada na porta 80).
dlu de
3

Quando você usa float sem largura, permanece algum espaço nessa linha. Para bloquear este espaço, você pode usar clear:both;no próximo elemento.

imdad
fonte