Question

这个问题类似于this one（有一个很好的答案），虽然我的问题与浮动问题无关。

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

#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 Section 9.4.1 - Block Formatting Contexts，我发现了以下内容：

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

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

Answer 1

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

虽然浮点数和折叠边距之间的关系非常简单（从不发生），但边距不能通过具有overflow值的元素边界折叠的事实这不仅仅是此更改的副作用，因为边距定义为不会通过任何建立块格式上下文的框折叠，如section 8.3.1中所述。我引用：

建立新的块格式化上下文的元素的边距（例如浮点数和'溢出'而不是'可见'的元素）不会因其流入的子节点而崩溃。

这包括浮点数和具有overflow值的元素。溢出本身实际上对边缘没有任何直接影响。

如果父级和子级都是参与相同块格式化上下文的块级元素，则默认情况下它们将会折叠，除非存在某些内容：

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



“高度”为“auto”且“min-height”为零的流入块框的下边距与其最后一个流入块级子项的底部边距折叠，如果该框为没有底部填充且没有底部边框，并且孩子的下边距不会因具有间隙的上边距而崩溃。

这解释了为什么父母的背景不会延长，直到你试图阻止边缘崩溃。

Answer 2

在您的第一个示例中，父级和子级的顶部和底部边距已折叠。粗略地说，孩子的30px边际与父母的零边际相结合，两者的较大边际应用于父母。 Quote：

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

在同一文档中，解释了溢出的影响（如第二个例子中所示）：

建立新块格式化上下文的元素的边距（例如作为浮动和元素溢出＆＃39;除了＆＃39;可见＆＃39;）之外没有与流动的孩子一起崩溃。

Answer 3

这澄清了我偶尔会遇到的高度问题。看起来父元素的高度不是从孩子的边缘计算的。

调整小提琴：http://jsfiddle.net/u6tQj/2/

#parent { background: #555;}
#child { margin:200px; background: #ccc; }

边距正在应用于孩子，但父母的高度不受影响。添加溢出或边框会导致高度调整。我有时会为什么父元素不会一直扩展以容纳孩子而斗争。

看起来很奇怪，但是......

在父高度上存在冲突规则可能会很复杂。它会影响许多浏览器布局，例如父项位置相对，子项设置为绝对，或溢出自动/隐藏，可能还有许多其他布局算法。我认为它会不必要地使浏览器的布局引擎复杂化，就像css选择器特异性有时对我们来说是一个主要的痛苦。

您可以向父级添加填充以调整其高度，这更直观（不是吗？）。

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

3 个答案: