Question

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

div.clear {
    clear:both;
}

Answer 1

元素的高度由其子元素决定（除非明确设置）。 E.g：

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

A的高度取决于其子C的下边界的位置。

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

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

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

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

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

D元素是零高度元素，设置了clear属性。这导致它落在浮动元素之下（清除它们）。这导致A有一个常规的子元素来计算它的高度。这至少是最典型的用例。

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

Answer 2

清除浮动样式。

Answer 3

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

Answer 4

当我们使用基于浮动的布局编写代码时，我们遇到的最常见问题是父div容器不会扩展到子浮动元素的高度。解决此问题的典型解决方案是在浮动元素之后添加带有clear float的元素，或者向父div添加clearfix。

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

Answer 5

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等等。

Answer 6

上面已经介绍了所有技术细节。通常，这种元素充当浮动元素的“硬线”，将它们正确地垂直放置。值得一提的是，如今有更好的方法。