Почему <div class= "clear" ></div> используется после нескольких плавающих DIVS в контейнере DIV?

Во многих местах я встречал <div class="clear"></div>, но я не знаю, почему это делается? Может кто-нибудь проинструктировать меня об этом, почему он используется в css? Это CSS:

div.clear {
    clear:both;
}

Ответы

Ответ 1

Высота элемента определяется его дочерними элементами (если он явно не установлен). Например:.

+------A------+
|+-----------+|
||     B     ||
|+-----------+|
|+-----------+|
||     C     ||
|+-----------+|
+-------------+

Высота A определяется тем, где нижняя граница его дочернего элемента C.

Теперь плавающие элементы не учитываются в высоту их родителей, они выведены из регулярного потока:

+------A------+
+--+---------++
   |    B    |
   +---------+
   +---------+
   |    C    |
   +---------+

Элемент A свернут до минимальной высоты, поскольку его два дочерних элемента плавают.

Для восстановления правильной высоты вводятся элементы очистки:

+------A------+
|  +---------+|
|  |    B    ||
|  +---------+|
|  +---------+|
|  |    C    ||
|  +---------+|
|+-----D-----+|
+-------------+

Элемент D - это элемент с нулевой высотой с набором атрибутов clear. Это заставляет его опускаться ниже плавающих элементов (он очищает их). Это заставляет A иметь обычный дочерний элемент для вычисления его высоты. Это, по крайней мере, самый типичный вариант использования.

Часто лучшее решение для введения дополнительных элементов HTML состоит в том, чтобы установить A на overflow: hidden. Это приводит к форсированию расчета высоты, который имеет тот же эффект от роста высоты до нужного размера. Это решение может иметь или не иметь других побочных эффектов.

Ответ 3

Подводя итог, он хотел бы сказать, что браузер ничего не позволяет (т.е. любой элемент - это div, span, anchor, table и т.д.) либо слева, либо справа от предыдущего элемента. Это заставит следующий элемент перейти к следующей строке.

Ответ 4

Наиболее распространенные проблемы, с которыми мы сталкиваемся при написании кода с макетами с плавающей точкой, это то, что родительский контейнер div не расширяется до высоты дочерних плавающих элементов. Типичным решением для устранения этого является добавление элемента с явным float после плавающих элементов или добавление clearfix в родительский div.

Я даю вам два хороших примера для лучшего понимания очистки полей: -

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Ответ 5

Хорошее объяснение по причине. Но <div class="clear"></div> - это старый метод и непрофессиональная попытка использовать

#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; }

просто добавляйте другие элементы, которые нужно очистить как #firstlement:after, .secondelement:after и т.д.