为什么溢出：隐藏有意想不到的副作用，高度增长，以包含浮动元素？

This question is best explained by this fiddle, with the following HTML:

这个小提琴最好用以下HTML解释这个问题：

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

CSS:

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;
}

Basically, I'm wondering why does overflow: hidden cause the outer element to grow in height, encompassing the two floated elements?

基本上，我想知道为什么溢出：隐藏导致外部元素高度增长，包含两个浮动元素？

2 个解决方案

#1

To put it most simply, it is because a block box with an overflow that isn't visible (the default) creates a new block formatting context.

最简单的说，是因为带有溢出的块框（不可见）（默认值）会创建一个新的块格式化上下文。

Boxes that create new block formatting contexts are defined to stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto (the spec calls these boxes block formatting context roots):

创建新块格式化上下文的框被定义为拉伸以包含它们的浮动高度，如果它们本身没有指定的高度，则默认为auto（规范称这些框阻止格式化上下文根）：

10.6.7 'Auto' heights for block formatting context roots

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

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

[...]

[...]

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

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

This was not the case in the original CSS2 spec, but was introduced as a change in CSS2.1 in response to a different (and much more pressing) issue. This answer offers an explanation for the changes. For this reason, it seems quite apt to call it a side effect, although the changes were very much intentional.

原来的CSS2规范不是这种情况，而是作为CSS2.1的变化引入的，以响应不同（更紧迫）的问题。这个答案提供了对变化的解释。出于这个原因，似乎很容易将其称为副作用，尽管这些变化非常有意。

Also note that this is not the same thing as clearing floats (clearance). Clearance of floats only happens when you use the clear property and there are preceding floats to be cleared:

另请注意，这与清除浮动（间隙）不同。只有当您使用clear属性并且有前面的浮动要清除时，才会清除浮动：

If you have an element with clear: both that's a sibling of the outer element in your example, the floats will be cleared but the outer element will not stretch.

如果你有一个带有clear的元素：这两个都是你示例中外部元素的兄弟，那么浮动将被清除，但外部元素将不会拉伸。
If you have a similar element (or pseudo-element) as the last child of the outer element instead (making it a following sibling of the floats), the outer element will stretch downward in order to contain the bottom edge of that element, and for a zero-height element that essentially means the bottommost edge of the floats. This technique is known as "clearfix" because the element (or pseudo-element) has no other purpose than to force the outer element to contain the floats by way of clearance within it.

如果你有一个类似的元素（或伪元素）而不是外部元素的最后一个子元素（使它成为浮动的后续兄弟），外部元素将向下拉伸以包含该元素的下边缘，并且对于零高度元素，它实质上意味着浮动的最底边。这种技术被称为“clearfix”，因为元素（或伪元素）没有其他目的，只能强制外部元素通过其中的间隙来包含浮动。

#2

The way i explain it to my students is:

我向学生解释的方式是：

You trigger the element containing the floats by telling him, "everything that is to much, don't show", so the element will look for any content that is too much, and he will find some elements that are floating, now he knows that he should contain them.

你通过告诉他“一切都很多，不显示”来触发包含浮点数的元素，所以元素会查找任何太多的内容，并且他会发现一些浮动的元素，现在他知道了他应该包含它们。

#1