html - 为什么在一个容器DIV中多个 float DIVS之后？

Question

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

div.clear {
    clear:both;
}

Answer 1

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

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

A 的高度由其子 C 的下边界所在的位置决定。

现在， float 元素不计入其父元素的高度，它们被排除在常规流之外:

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

A 元素折叠到最小高度，因为它的两个子元素是 float 的。

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

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

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

引入额外 HTML 元素的更好解决方案通常是将 A 设置为 overflow: hidden。这具有强制进行高度计算的效果，这具有将高度增加到所需大小的相同效果。不过，此解决方案可能有也可能没有其他副作用。