除了"可见"之外的"溢出"值对块格式化上下文的影响

Question

这个问题类似于这一个(有一个很好的答案),但我的不属于浮动的问题.

我最近在尝试将边距应用于块级元素的唯一子节点时遇到了一些麻烦:

#parent {
    background: rgba(255, 0, 0, 0.1);
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 255, 0, 0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

虽然应用了保证金,但父母的背景却不是.除非在之前和之后添加兄弟姐妹#child,或者(在我看来更有趣的是)添加overflow除了visible设定之外的任何值,否则这仍然是正确的.这是相同的示例,但具有溢出值:

#parent {
    background: rgba(255, 0, 0, 0.1);
    overflow: auto;
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 255, 0, 0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

从CSS2.1第9.4.1节 - 块格式化上下文中,我发现了以下内容:

浮动,绝对定位元素,阻止不是块框的容器(例如内联块,表格单元格和表格标题),以及"溢出"除"可见"之外的块框(除非该值已传播)到视口)为其内容建立新的块格式化上下文.

在这个例子中,我真的很难理解"溢出而不是可见"逻辑背后的基本原理.在这种情况下,边缘似乎没有被削减,因为唯一要改变的是背景.有人能证明为什么价值overflow: visible创造了这样的情况吗？

Answer 1

正如我在对您链接到的问题的回答中所介绍的，overflow除了visible导致新的块格式化上下文之外的主要原因值是由于与浮点数相关的实现限制，即使溢出的概念并不立即出现与浮动的关系。

虽然浮动和折叠边距之间的关系非常简单（它从未发生过），但事实上，边距无法折叠到具有此类值的元素的边界，这overflow只不过是此更改的副作用，因为边距是定义的不要折叠任何建立块格式化上下文的框，如第 8.3.1 节中所述。我引用：

• 建立新块格式化上下文的元素的边距（例如浮动元素和具有“溢出”而不是“可见”的元素）不会与其流入子元素合并。

这包括浮点数和具有此类值的元素overflow。溢出本身实际上并不对边距产生任何直接影响。

当父元素和子元素都是参与同一块格式化上下文的块级元素时，它们将默认折叠，除非有什么阻碍：

• 如果元素没有顶部边框、没有顶部填充并且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距折叠。

• 如果盒子没有底部填充并且没有底部填充，则“高度”为“auto”且“最小高度”为零的流入块盒的底部边距将与其最后一个流入块级子级的底部边距折叠。底部边框和子项的底部边距不会与有间隙的顶部边距折叠。

这解释了为什么在您尝试阻止边距折叠之前，父级的背景不会扩展。