overflow - 为什么 CSS2.1 定义了 "visible"以外的溢出值来建立新的 block 格式化上下文？

Question

CSS2.1 规范 mandates that overflow other than visible establish a new "block formatting context" .这让我觉得很奇怪，一个明显目的是 overflow hidden 而不影响布局的属性实际上确实在很大程度上影响了布局。

似乎是 visible 以外的溢出值结合两个完全不相关的特征:是否创建了 BFC 以及是否隐藏了溢出。如果没有 BFC，"overflow:hidden"并不是完全没有意义，因为 float 历史上可以溢出其父元素，hiding the overflow without changing the layout似乎很明智。

这个决定背后的原因是什么，假设他们是已知的？制定规范的人是否描述了为什么要这样做？

Answer 1

我代表您在邮件列表中询问了这个问题；可以找到线程 here .总之，this has to do with scrolling content for the most part :

Fundamentally, because if the spec didn't say this, then having floats intersect with something that's scrollable would require the browser to rewrap (around intruding floats) the contents of the scrollable element every time it scrolls. This is technically what CSS 2.0 required, but it was never implemented, and it would have been a huge problem for speed of scrolling.

-David

最有可能的是，它指的是一个盒子中的可滚动内容，该内容可能出现在 float 的父级之外，但会与 float 相交。我不认为这与在可滚动容器内的 float 周围重新包装内容有关，因为这已经自然发生，加上 the float would clip into the container and scroll along with the rest of its content anyway .

最后这对我来说是有意义的。事实上，我将在这里提供一个示例，希望它对您和其他可能想知道的人有意义。考虑涉及两个具有相同固定高度和 overflow: visible 的盒子的场景。 (默认)，其中第一个包含一个超出其父级高度的浮点数:

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

/* Presentational properties omitted */
div {
    height: 80px;
}

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

请注意与 section 9.5 中给出的示例之一的相似性.出于此答案的目的，此处的第二个框仅显示为具有溢出的内容。

这很好，因为内容永远不会滚动，但是当 overflow设置为除 visible 以外的其他内容，这会导致内容不仅被框的边界剪裁，而且变得可滚动。如果第二个盒子有 overflow: auto ，这就是浏览器实现原始 CSS2 规范的样子:



由于 float ，尝试滚动内容将导致浏览器必须重新包装它，因此它不会被 float 遮挡(以及滚动出顶部边缘的部分会发生什么？)。当滚动到底部时，它可能看起来像这样:



这里的问题是浏览器每次在滚动期间重新绘制内容时都必须重新包装内容。对于能够基于像素平滑滚动的浏览器——也就是说，所有浏览器——我明白为什么这会是一场性能灾难! (也是一个用户体验。)

但那是用户可以滚动内容的时候，对吗？这对 overflow: auto 有意义和 overflow: scroll ，但是 overflow: hidden 呢？ ?

好吧，一个常见的误解是容器带有 overflow: hidden只是通过剪切隐藏内容，不能滚动。 This is not completely true :

While scrolling UI is not provided, the content is still scrollable programmatically, and a number of pages perform just such scrolling (e.g. by setting scrollTop on the relevant element).

-Boris

确实，如果第二个框设置为 overflow: hidden，这就是它的样子。然后使用以下 JavaScript 滚动到底部:

var div = document.getElementsByTagName('div')[1];
div.scrollTop = div.scrollHeight;

再次注意，内容必须重新包装以避免被 float 遮挡。

尽管这不会像滚动 UI 那样对性能造成痛苦，但我最好的猜测是他们制作了带有任何 overflow 的框。除 visible 以外的值生成一个新的 BFC 主要是为了一致性。

所以，这个变化是在 CSS2.1 中带来的，文档 here .现在，如果您申请 overflow除 visible 以外的值仅对于第二个框，浏览器所做的是将整个框推到一边为 float 让位，因为该框现在创建了一个新的块格式上下文来包含其内容，而不是围绕 float 流动。此特定行为在以下 paragraph 中指定:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

这是 overflow: auto 的样子例如:



注意没有间隙；如果第二个盒子有 clear: left或 clear: both无论它是否建立了自己的 BFC，它都会被推下，而不是被推到一边。

如果您申请 overflow: auto相反，到第一个框时，由于其固定高度(设置为 80px)，浮点数与其余内容一起被剪切到其包含框内。在上面给出的示例代码中:



如果您将第一个框恢复为 height: auto (默认值)，通过覆盖或删除 height: 80px从上面声明，它然后延伸到 float 的高度:



这恰好是 new in CSS2.1 as well , 在那个元素中 height: auto生成一个新的块格式化上下文(即块格式化上下文根)将垂直延伸到其 float 的高度，与常规框不同，它不仅足以包含其流入内容。更改已记录在案 here和 here .导致缩小盒子以使其不与浮点相交的副作用的更改被记录在案 here .

在这两种情况下，无论你对第二个盒子做什么，它都不会受到 float 的影响，因为它已经被容器的边界限制了。