Question

任何人都可以解释浮动元素什么时候被清除？

我有时注意到，当我用HTML制作内容时，我不清楚它们，它看起来一切都很好！

还可以overflow:hidden作为清算的替代品吗？

看看这个例子：

<html>
<head>
  <style>
    .a { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that does have overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <p>i didn't clear anything</p>
</body>
</html>

这里我没有清除浮动的div，但为overflow:hidden类设置了.a，并且下面的出现在普通元素流中。

但是，如果我从overflow:hidden课程中删除.a，则会被取代。

请解释一下！

谢谢，Boda Cydo。

Answer 1

对于块级，未替换的元素，当overflow未设置为“可见”而height不是“自动”时，element's height取决于其后代（CSS 2.1 § 10.6.6）。因此，当您在overflow: hidden上设置.a时，它会延伸以包含浮动的后代。 低于.a，因此它位于花车下方。

如果没有overflow: hidden，.a不包含浮动的孩子;它的计算高度为0. 仍然低于.a，但不是浮点数。浮点数推动的内联内容，因为浮点数不会这样做。

尝试在.a和段落周围添加边框，以便更清楚地看到差异。

Answer 2

任何时候都应该使用

overflow: hidden来代替清除div，大部分时间都是这样。

Answer 3

如果您需要将轮胎花纹块周围的元素作为单元浮动，并且包含元素需要垂直扩展到最高的高度。否则，非浮动相邻元素的文本/内联元素将围绕浮动流动。如果这个内容最终比你的浮动高，那么你就可以了......容器会扩展。然而，如果漂浮的元素更高，那么如果你想让容器和浮子一样高，你需要清除它。

Answer 4

正如我在你的另一篇帖子When should overflow:hidden be used for a <div>?中回复的那样，这是因为a div的子元素会将边距抛出边界，因为溢出是除了可见之外的其他内容。当溢出可见时，技术上停在div的边界为“妈妈！”。当它不是可见的（溢出，滚动，自动）时，边界将继续，直到它到达其自己父节点的边界（在这种情况下是浏览器的右边缘）。新的块元素可能无法开始，直到它有空间进入。当溢出可见时，它可以直接在最后一个浮动div的边界边界之后开始。当它是另一个时，它必须等待div的完全中断。

应该何时清除浮动的HTML元素？

4 个答案: