CSS奇怪的行为：min-height和margin collapse

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的边距折叠页面指出，如果在父元素上设置了min-height，则会防止其底部边距与其最后一个子元素的底部边距相邻-从而防止边距折叠。 对我来说，这很有道理。

父级和第一个/最后一个子级：
如果没有边框，填充，内联部分，创建块格式化上下文或清除以将块的margin-top与其第一个子块的margin-top分隔开，或者没有边框，填充，内联内容，高度，min-height或max- height将块的margin-bottom与其最后一个子元素的margin-bottom分隔开，则这些margin会折叠。 折叠的边距最终会落在父容器外面。

然而，在此示例中，DevTools显示p标记的底部边距在预期位置-直接位于p元素下方-但是容器下方有50px的空白空间，这没有意义。 p标记的边距似乎仍然在某种程度上折叠，最终落在父元素外面，并影响下一个元素的位置，即使p和.container的margin不相邻，并且DevTools显示p标记的margin与.container底部无关。

有人能解释一下为什么边距仍然有点折叠并留下.container下方的空白空间吗？ 此外，MDN页面是否错误地声称min-height将防止边距折叠？

谢谢

- rmc868

---

我不知道为什么会发生这种情况，但我已经进行了快速修复，也许可以帮到您。http://jsfiddle.net/pLkckytx/3/ - Sabbin

Webkit浏览器在两个div之间显示间隙，而在Firefox中没有间隙。我不确定预期的行为应该是什么，但我认为Firefox遵循W3C规则以及自己的规则：https://www.w3.org/TR/CSS2/box.html#collapsing-margins 如果您将“min-height”更改为“height”，则在Webkit浏览器中没有间隙，这使我相信他们做错了什么。 - JoeMoe1984

Answer 1

在父容器上应用display: flow-root;。这样应该就可以解决了。

- Jackie Santana