13

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

div.clear {
    clear:both;
}
4

6 回答 6

47

元素的高度由其子元素确定（除非明确设置）。例如：

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

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

现在，浮动元素不计入其父母的高度，它们被排除在常规流程之外：

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

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

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

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

D 元素是具有clear属性集的零高度元素。这会导致它低于浮动元素（它会清除它们）。这导致 A 有一个常规的子元素来计算它的高度。至少这是最典型的用例。

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

于 2012-04-17T04:19:37.697 回答
1

就是清除浮动样式。

清除：http ://www.w3.org/wiki/CSS/Properties/clear

浮动：http ://www.w3.org/wiki/CSS/Properties/float

于 2012-04-17T04:12:32.117 回答
1

总而言之，这就像告诉浏览器不允许在前一个元素的左侧或右侧出现任何内容（即，任何元素，无论是 div、span、anchor、table 等）。这将使下一个元素移动到下一行。

于 2012-04-17T04:27:59.773 回答
1

deceze 的解释很好。但是<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依此类推。

于 2013-06-20T09:11:44.560 回答
0

当我们使用基于浮动的布局编写代码时，我们面临的最常见问题是父 div 容器没有扩展到子浮动元素的高度。解决此问题的典型解决方案是在浮动元素之后添加一个具有清晰浮动的元素，或者向父 div 添加一个 clearfix。

我给你两个很好的例子，以便更好地理解清除浮动：-

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

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

于 2012-04-17T04:30:24.493 回答
0

上面已经介绍了所有的技术细节。更一般地说，这种元素充当浮动元素的“硬线”，将它们正确地垂直放置在另一个之下。值得一提的是，现在有更好的方法。

于 2020-07-08T11:05:10.740 回答