为什么将溢出设置为除'可见”之外的任何内容都会在 CSS2.1 中创建新的块格式上下文？

为什么CSS2.1定义“Visible”以外的溢出值来建立新的块格式化上下文？

在CSS2.1中，除了“visible”之外的溢出值” 被指定来建立一个新的块格式化上下文（BFC）。这可能令人费解，因为溢出的预期目的是隐藏溢出而不影响布局。

深入研究这个问题后，很明显，除了“可见”之外的溢出值还包含两个看似不相关的功能：BFC 创建和溢出隐藏。然而，正如历史所证明的那样，浮动可以扩展到其父元素之外，因此在不改变布局的情况下隐藏溢出是有意义的。

决策的原因

背后的基本原理决策主要源于滚动内容。根据CSS工作组邮件列表：

“如果规范没有指定这一点，则与可滚动内容相交的浮动将要求浏览器在滚动期间不断地重新包装可滚动内容（围绕入侵的浮动）。这将有计算成本高昂且不利于滚动性能。”

如何实现有效

考虑以下场景：两个固定高度的盒子，溢出设置为“可见”，其中第一个盒子包含一个超出父级高度的浮动：

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

当溢出保持为“可见”时，就没有问题，因为内容不受滚动的影响。但是，当溢出设置为“visible”以外的值时，内容将被框的边界剪切并可滚动。如果第二个框有溢出：自动，它会类似于：

[两个具有溢出：自动的固定高度框的图像]

由于浮动阻碍滚动，浏览器必须重新包装内容以确保其保持可见。每次在滚动过程中重新绘制内容时重复此过程会对性能产生不利影响。

一致性和隐藏滚动

另一个明显的误解是带有溢出：隐藏的容器只是隐藏内容并且不能滚动。虽然没有用于滚动的用户界面，但仍然可以通过调整scrollTop 属性以编程方式滚动内容。即使在这种情况下，也需要重新包装内容以避免浮动模糊。

因此，出于一致性目的，除了“可见”之外的任何溢出值都会导致 BFC。

CSS2.1 中的更改

在 CSS2.1 中，包含了用于除“可见”导致元素与浮动交互方式的变化：

• 整个带有溢出的盒子被推到了浮动的一边，因为它创建了一个封装其内容的 BFC。
• 高度为 auto 的盒子和 BFC 将垂直拉伸以容纳浮动，而不是只是适合他们的流入

摘要

将 BFC 创建链接到“可见”以外的溢出值的决定主要是出于性能考虑，并确保与编程的一致性滚动。尽管行为看似矛盾，但它有助于在涉及浮动的复杂场景中保持布局和滚动的完整性。

以上是为什么将溢出设置为除'可见”之外的任何内容都会在 CSS2.1 中创建新的块格式上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！