为什么在容器DIV中多个浮动DIVS之后使用<div class ="clear"> </ div>？

Question

我<div class="clear"></div>在很多地方遇到过,但我不知道为什么要这样做？有人可以向我简要介绍一下,为什么它在css中使用？这是CSS:

div.clear {
    clear:both;
}

Answer 1

元素的高度由其子元素决定(除非明确设置).例如:

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

A的高度由其子C的下边界的位置决定.

现在,浮动元素不计入父母的高度,它们被从常规流程中取出:

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

A元素折叠到最小高度,因为它的两个子元素是浮动的.

引入清除元素以恢复正确的高度:

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

D元素是具有clear属性集的零高度元素.这导致它落在浮动元素之下(它清除它们).这导致A有一个常规的子元素来计算它的高度.这至少是最典型的用例.

引入额外HTML元素的更好的解决方案是将A设置为overflow: hidden.这具有强制高度计算的效果,其具有将高度增加到期望尺寸的相同效果.该解决方案可能有也可能没有其他副作用.