Какая польза от style = «clear: both»?

98

Мне довелось увидеть, у divкого был стиль clear:both! Какая польза от clearв style?

<div style="clear:both">

html css

— Thomasbabuj
источник

249

clear:both заставляет элемент опускаться ниже любых плавающих элементов, которые предшествуют ему в документе.

Вы также можете использовать clear:leftили, clear:rightчтобы он опускался ниже только тех элементов, которые были перемещены влево или вправо.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

— РичиХиндл
источник

2

Также он заставляет родительский div соответствовать высоте.

— Олег

@Jason, ошибка, о которой вы говорите, применима только для Internet Explorer 6 в Windows XP. Это хорошо, что нам не нужно поддерживать его в большинстве случаев в наши дни.

— Евгений Афанасьев

5

@YevgeniyAfanasyev, да, это правда. Мой комментарий относится к 2009 году, когда это было еще применимо.

— Джейсон

20

Чтобы добавить к ответу RichieHindle, ознакомьтесь с Floatutorial , в котором рассказывается , как работают плавающие и очищающие CSS.

— Пол Диксон
источник

1

15 февраля 2016 года мне не удалось подключиться к серверу Floatutorial (в соединении отказано на порту 80).

— dlu

3

Когда вы используете float без ширины, в этой строке остается некоторое пространство. Чтобы заблокировать это пространство, вы можете использовать clear:both;в следующем элементе.

— имдад
источник