Qual è l'uso di style = "clear: both"?

98

Mi è capitato di vedere uno divche aveva lo stile clear:both! A cosa serve clearin style?

<div style="clear:both">

html css

— thomasbabuj
fonte

249

clear:both fa cadere l'elemento al di sotto di qualsiasi elemento float che lo precede nel documento.

Puoi anche usare clear:lefto clear:rightper far cadere sotto solo quegli elementi che sono stati flottati a sinistra oa destra.

+------------+ +--------------------+
|            | |                    |
| 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

Inoltre fa sì che il div genitore si adatti all'altezza.

— Oleg

@ Jason, il bug a cui ti riferisci è applicabile solo per Internet Explorer 6 su Windows XP. È una buona cosa che non abbiamo bisogno di supportarlo la maggior parte delle volte in questi giorni.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, sì, questo è vero. Il mio commento è del 2009, quando era ancora applicabile.

— Jason

20

Solo per aggiungere alla risposta di RichieHindle, dai un'occhiata a Floatutorial , che ti guida attraverso il funzionamento del CSS floating e clearing.

— Paul Dixon
fonte

1

Il 15 febbraio 2016, non sono stato in grado di connettermi al server per Floatutorial (connessione rifiutata sulla porta 80).

— dlu

3

Quando usi float senza larghezza, rimane dello spazio in quella riga. Per bloccare questo spazio puoi usare clear:both;nell'elemento successivo.

— imdad
fonte