Jaki jest pożytek z style = „clear: both”?

98

Zdarzyło mi się zobaczyć, divktóry miał styl clear:both! Jaki jest pożytek z clearw style?

<div style="clear:both">
thomasbabuj
źródło

Odpowiedzi:

249

clear:both sprawia, że ​​element znajduje się poniżej wszelkich elementów pływających, które go poprzedzają w dokumencie.

Możesz także użyć clear:leftlub, clear:rightaby spadł poniżej tylko tych elementów, które zostały przesunięte w lewo lub w prawo.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+
RichieHindle
źródło
2
Sprawia również, że nadrzędny element DIV dopasowuje się do wysokości.
Oleg
@Jason, błąd, do którego się odnosisz, dotyczy tylko przeglądarki Internet Explorer 6 w systemie Windows XP. To dobrze, że obecnie nie musimy go wspierać przez większość czasu.
Yevgeniy Afanasyev
5
@YevgeniyAfanasyev, tak, to prawda. Mój komentarz pochodzi z 2009 roku, kiedy to było nadal aktualne.
Jason
20

Aby dodać do odpowiedzi RichieHindle, zapoznaj się z samouczkiem Floatutorial , który przeprowadzi Cię przez proces pływania i czyszczenia CSS.

Paul Dixon
źródło
1
W dniu 15.02.2016 nie mogłem połączyć się z serwerem dla Floatutorial (odmowa połączenia na porcie 80).
dlu
3

Gdy używasz zmiennej zmiennoprzecinkowej bez szerokości, w tym wierszu pozostaje trochę miejsca. Aby zablokować tę przestrzeń, możesz użyć clear:both;w następnym elemencie.

imdad
źródło