为啥溢出：隐藏具有增加高度以包含浮动元素的意外副作用？

Posted 2023-03-06

【中文标题】为啥溢出：隐藏具有增加高度以包含浮动元素的意外副作用？

【英文标题】：Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?为什么溢出：隐藏具有增加高度以包含浮动元素的意外副作用？

【发布时间】：2012-09-28 18:47:14

【问题描述】：

这个问题最好用this fiddle解释，html如下：

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

CSS：

.outer 
    width: 100px;
    border: solid 5px #000;

.inner-left 
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;

.inner-right 
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;

基本上，我想知道为什么overflow: hidden 会导致外部元素的高度增加，包含两个浮动元素？

【问题讨论】：

我不知道，只是我知道是花车让它坏了。当你使用这样的包装器时，你必须清除浮动。有很多解决方案。这是一个：jsfiddle.net/WuqGM/9

@Camhänget：或者他可以选择不清除浮动并使用overflow: hidden，如图所示。也就是说，我已经编辑了我的答案以包含关于 clearfixes 的注释 - 这里描述的问题不是 clearfix。

【参考方案1】：

简单地说，这是因为带有overflow 而不是visible（默认）的块框会创建一个新的block formatting context。

如果创建新块格式化上下文的框本身没有指定高度，则将其定义为stretch to contain their floats by height，默认为auto（规范将这些框称为块格式化上下文根）：

10.6.7 块格式化上下文根的“自动”高度

在某些情况下（例如，参见上面的 10.6.4 和 10.6.6 节），建立块格式化上下文的元素的高度计算如下：

[...]

此外，如果元素有任何浮动后代，其底部边缘边缘低于元素的底部内容边缘，则高度会增加以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位后代中的浮点数或其他浮点数不考虑。

这在最初的 CSS2 规范中并非如此，而是作为 CSS2.1 中的一个更改引入，以响应一个不同的（并且更紧迫的）问题。 This answer 提供了更改的解释。出于这个原因，似乎很容易将其称为副作用，尽管这些更改是有意为之的。

另请注意，这与清除浮动 (clearance) 不同。 仅在您使用 clear 属性并且需要清除前面的浮动时才会清除浮动：

如果您有一个带有 clear: both 的元素，它是您示例中外部元素的兄弟，浮动将被清除，但外部元素不会拉伸。

如果您有一个与外部元素的最后一个子元素相似的元素（或伪元素）（使其成为 floats 的后续兄弟），则外部元素将按顺序向下延伸包含该元素的底部边缘，对于零高度元素，它基本上意味着浮动的最底部边缘。这种技术被称为“clearfix”，因为元素（或伪元素）除了强制外部元素通过其内部的清除来包含浮动之外没有其他目的。

【讨论】：

很好的解释。我的问题：是否有理由不使用 overflow:hidden ，这意味着它是否有副作用会导致我们使用 clearfix 技术？还是可以安全使用？

@TetraDev：通常有两个原因 1) 正是它在锡上所说的 - 你不希望剪辑溢出的内容（或在溢出的情况下） ：自动，您不希望容器元素生成滚动条）2）您希望非浮动元素的边距与容器元素一起折叠（假设没有其他东西已经阻止边距折叠）。在这些情况下，使用 clearing 元素是合适的——我建议先寻找一个合适的元素来应用 clear，然后再考虑 clearfix 作为最后的手段。

@TetraDev：（有趣的是，一些 clearfixes 像 Nicolas Gallagher contain extras designed to block margin collapse 的那个，渲染 #2 有点没有意义。）

【参考方案2】：

我向我的学生解释它的方式是：

您通过告诉他“所有内容过多，不要显示”来触发包含浮动的元素，因此该元素将查找任何过多的内容，并且他会找到一些浮动的元素，现在他知道他应该收容他们。

【讨论】：

您需要澄清这仅适用于您有浮动元素的情况，因为其他任何内容都会被隐藏（这就是overflow: hidden 的重点）。

“会找到一些浮动的元素”我想会做到吗？ ;-)