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

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”，因为元素（或伪元素）没有其他目的，只能强制外部元素通过其中的间隙来包含浮动。

Answer 2

我向学生解释的方式是：你通过告诉他“一切都很多，不显示”来触发包含花车的元素，所以元素会寻找任何太多的内容，他会发现一些浮动的元素，现在他知道了他应该包含他们。

Answer 3

通常有两个原因：1）它在锡上的确切内容 - 你不希望被溢出的内容被剪裁（或者在溢出的情况下：auto，你不希望容器元素生成滚动条） 2）您希望非浮动元素的边距与容器元素一起折叠（假设没有其他东西已经阻止边距折叠）。在这些情况下，使用清除元素是合适的 - 我建议在将clearfix视为最后手段之前，先找一个合适的元素来清除。