33

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

4

2 回答 2

41

最简单地说，这是因为带有overflownot visible（默认）的块框创建了一个新的块格式化上下文。

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

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

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

[...]

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

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

另请注意，这与清除浮动（clearance）不同。仅当您使用该clear属性并且要清除前面的浮点数时才会清除浮点数：

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

  • 如果您有一个与外部元素的最后一个子元素相似的元素（或伪元素）（使其成为floats的后续兄弟），则外部元素将向下延伸以包含该元素的底部边缘，并且对于零高度元素，它本质上意味着浮动的最底部边缘。这种技术被称为“clearfix”，因为元素（或伪元素）除了强制外部元素通过内部清除来包含浮动之外没有其他目的。

于 2012-10-08T13:50:00.717 回答
2

我向学生解释的方式是：

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

于 2012-10-08T14:44:02.180 回答