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

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的示例中有一个元素,那就是外部元素的兄弟元素,浮动元素将被清除,但外部元素不会拉伸.

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