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

CSS2.1规范 mandates that overflow other than visible establish a new “block formatting context”.这让我很奇怪，一个属性的显而易见的目的是隐藏溢出而不影响布局，实际上确实影响布局的主要方式。

看起来溢出值除了可见组合两个完全不相关的功能：是否创建一个BFC和是否隐藏溢出。它不像“overflow：hidden”没有BFC是完全无意义的，因为浮动历史上可以溢出他们的父元素，hiding the overflow without changing the layout似乎是明智的。

假设他们知道，这个决定背后的原因是什么？有谁在规范工作的人描述为什么这是决定的情况？

解决方法

我代表你在邮件列表上问这个问题;线程可以找到 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相交的框中的可滚动内容。我不认为这与在可滚动容器内的浮动上重新包装内容，因为这已经发生自然，加上the float would clip into the container and scroll along with the rest of its content anyway。

最后这对我有意义。事实上，我将在这里提供一个例子，希望它对你和任何其他人有意思。考虑一个涉及具有相同固定高度和溢出的两个框的场景：可见(默认)，其中第一个包含超出其父高度的浮动：

<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中给出的示例之一的相似性。为了这个答案的目的，这里的第二个框被简单地示出具有溢出的内容。

这是很好的，因为内容永远不会被滚动，但是当溢出被设置为除了可见之外的东西，导致内容不仅被框的边界剪切，而且变得可滚动。如果第二个框有溢出：auto，这是什么看起来像浏览器实现原来的CSS2规格：

因为浮动，尝试滚动内容会导致浏览器重新包装它，所以它不会被浮动(和从顶部边缘滚动出来的部分应该发生什么？)。当滚动到底部时，它可能看起来像这样：

这里的catch是浏览器必须重新包装内容每次它在滚动期间重绘。对于能够基于像素的平滑滚动的浏览器 – 也就是说，所有的 – 我可以看到为什么会是一个性能灾难！ (和用户体验一样)。

但是，这是为什么时，用户可以滚动内容，对吧？这将有意义overflow：auto和overflow：scroll，但是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;

再次注意，内容必须重新包装以避免被浮动隐藏。

即使这不像滚动UI可用的性能那么痛苦，我最好的猜测是，他们使用任何溢出值除了visible生成一个新的BFC主要是为了一致性。

因此，这种变化是在CSS2.1中提出的，记录在here.现在，如果你应用一个溢出值，而不是仅可见的第二个框，浏览器会推动整个框，为浮动，该框现在创建一个包含其内容的新的块格式化上下文，而不是围绕浮动。此特定行为在以下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 07007 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例如：

注意没有间隙;如果第二个框有清楚：左边或清楚：它都会被下推，而不是到边，不管它是否建立了自己的BFC。

如果将overflow：auto应用于第一个框，则由于其固定高度，float将被剪裁到其包含框内，因为其固定高度在上面给出的示例代码中设置为80px：

如果将第一个框还原为height：auto(默认值)，通过覆盖或从上面移除height：80px声明，它将延伸到浮点的高度：

这恰好是new in CSS2.1 as well，因为生成一个新的块格式化上下文(即块格式化上下文根)的height：auto元素将垂直伸展到其浮动的高度，而不仅仅是包含它的流内容不像一个普通的盒子。更改记录在here和here.文档here中记录了导致缩小框的副作用，使其不与浮点相交的变化。

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