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

Question

这个问题最好用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 会导致外部元素的高度增加，包含两个浮动元素？

Answer 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”，因为元素（或伪元素）除了强制外部元素通过其内部的清除来包含浮动之外没有其他目的。

Answer 2

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

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