CSS奇数行为:最小高度和边缘塌陷

Question

考虑以下代码：

​

.container {
  min-height: 100px;
  background-color: lightgreen;
}

p {
  margin-bottom: 50px;
}

<div class="container">
    <p>Welcome</p>
</div>
<div class="after">
  Main content.
</div>

​

http://jsfiddle.net/Lp4tp/31/

问题：

MDN边缘折叠页指出，如果在父元素上设置了最小高度，这将防止其底部边距与其上一个子元素的底部边距相邻，这将防止边距崩溃。对我来说，这是有道理的。

父母和第一个/最后一个孩子： 如果没有边界、填充、内联部分，block_formatting_context创建或清除一个块的边缘--从其第一个子块的顶部--或者没有边框、填充、内联内容、高度、最小高度或最大高度--将块的边底与其上一个子块的边底-底部分开，那么这些边距就会崩溃。崩溃的边距在父级之外结束。

然而，在这个例子中，DevTools显示了p标记的底部边距，它将被期望--就在p元素下面--但是容器下面有50 p的空格，这是没有意义的。P标记的边距似乎仍然在以某种方式崩溃，在父元素之外结束，影响下一个元素的位置，即使p和.container的边距不是相邻的，而且DevTools显示p标记的边距在.container底部很远。

有谁能解释一下为什么.container下面的空白处仍在崩溃？此外，MDN页面是否错误地说，最小高度将防止边缘崩溃？

谢谢

Answer 1

在父容器上应用display: flow-root;。这应该能解决问题。