为什么overflow：hidden有在高度增长以包含浮动元素的意想不到的副作用？ [英] Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

问题描述

此问题最好由这个小提示解释，并附有以下HTML：

This question is best explained by this fiddle, with the following 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;
}

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

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

推荐答案

它最简单的是，因为一个具有溢出但不是可见（默认）的块框创建一个新阻止格式设置上下文。

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.

创建新的块格式化上下文的框定义为如果它们自身没有指定的高度，默认为 auto （规范调用这些框块格式化上下文根）：

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):

10.6.7用于块格式化上下文根的自动高度

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

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:

[...]

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

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.

这不是原始CSS2规范中的情况，而是作为CSS2.1中的一个变化引入的，和更多的紧迫）问题。 此回答为更改提供说明。出于这个原因，它似乎很容易称为副作用，虽然变化是非常有意的。

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.

还要注意，这不是一样的事情， （清除）。当您使用清除属性并且要清除以前的浮动广告时，只会清除浮动 ：

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.

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

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.

这篇关于为什么overflow：hidden有在高度增长以包含浮动元素的意想不到的副作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！