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

html css

— thomasbabuj
źródło

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