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

Question

用以下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（默认）会创建新的[块格式设置上下文。

如果框本身没有指定的高度，则将创建新块格式上下文的框定义为按高度拉伸以包含其浮点数，默认为auto（规范将这些框称为框 格式上下文根 ）：

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

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

[…]

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

最初的CSS2规范不是这种情况，而是作为对CSS2.1的更改而引入的，以响应一个不同的（且更为紧迫的）问题。提供了有关更改的说明。因此，虽然更改是非常有意的，但似乎很容易将其称为副作用。

另请注意，这与清除浮点数（ 间隙 ）不同。花车的间隙 只有 当您使用会发生clear财产和有前面的彩车将被清除：

• 如果您clear: both的示例中有一个元素是外部元素的同级元素，则浮点数将被清除，但外部元素将不会拉伸。

• 如果您具有与外部元素的最后一个子元素相似的元素（或伪元素）（使其成为 float 的后续同级元素），则外部元素将向下拉伸以包含该元素的底部边缘，并且高度为零的元素，实际上意味着浮标的最底边缘。这种技术称为“ clearfix”，因为该元素（或伪元素）没有其他目的，只能通过使其内部的间隙迫使外部元素包含浮标。