何时应该准确清除浮动的 HTML 元素？答案

【问题标题】：When should floated HTML elements be cleared exactly?何时应该准确清除浮动的 HTML 元素？
【发布时间】：2010-01-30 08:11:09
【问题描述】：

谁能解释什么时候应该清除浮动元素？

我注意到有时当我用 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，而是为.a类设置了overflow:hidden，下面的出现在正常的元素流中。

但是，如果我从 .a 类中删除 overflow:hidden， 会被替换。

请解释一下！

谢谢，博达·赛多。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

尝试在.a 和段落周围加上边框，以便更清楚地看出区别。

【讨论】：

【解决方案2】：

overflow: hidden 应尽可能用作清除 div 的替代品，这是大多数时候。

【讨论】：

请注意，我们还可以区分浮动和清除的拉伸父级。
另见blue-anvil.com/archives/…

【解决方案3】：

如果您需要将轮胎块周围的元素作为单元浮动，并且包含元素需要垂直扩展至最高的高度。否则，非浮动相邻元素的文本/内联元素将围绕浮动浮动。如果这个内容最终比你的浮动高，那么你会没事的……容器会膨胀。但是，如果浮动元素更高，那么如果您希望容器与浮动一样高，则需要清除它。

【讨论】：

【解决方案4】：

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

【讨论】：