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

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