Question

以下是我的测试代码：

.div1 {
  width: 100px;
  background: red;
  padding-top: 0.1px;
  border: solid;
}
.div2 {
  width: 100px;
  margin: 100px;
  background: pink;
}
.div3 {
  overflow: visible;
}
.div4 {
  overflow: hidden;
}

<p>sample 1</p>
<div class="div1">
  <div class="div2"><div class="div3"></div></div>
</div>
<hr />
<p>sample 2</p>
<div class="div1">
  <div class="div2"><div class="div4"></div></div>
</div>

根据规范：

一个框的顶部和底部边距，它没有建立新的块格式化上下文，并且零计算'min-height'，零或'自动'计算'高度'，没有流入的子项

div2的余量可能不会崩溃。然而，在样本2中，边缘并没有像我想象的那样崩溃，但它们在样本1中崩溃了。那么为什么呢？

根据BoltClock的解释，样本1中的边距会崩溃，因为流入的孩子（即div3）没有建立新的BFC。我尝试了另一个测试：

.div1 {
  width: 100px;
  background: red;
  padding-top: 0.1px;
  border: solid;
}
.div2 {
  width: 100px;
  margin: 100px;
  background: pink;
}
.div5 {
  overflow: visible;
  float: left;
/*  position: absolute;*/
}

<div class="div1">
  <div class="div2"><div class="div5"></div></div>
</div>

float以外的none值，div5会建立一个新的BFC，因此div5的边距可能不会相应地崩溃。但不幸的是，它们崩溃了。

Answer 1

来自spec：

注意以上规则意味着：


如果'min-height'属性为零，并且它既没有顶部或底部边框也没有顶部或底部填充，并且它的“高度”为0或“自动”，则框的自身边距会崩溃，并且它不包含行框，及其所有流入子项的边距（如果有）崩溃。

强调我的。

在示例2中，div4建立了一个新的块格式化上下文。结果，它自己的边距不是相邻的（即它不符合你所引用的条件），因此它们不会崩溃。因为div4的边距不会崩溃，所以它自己的div2父级的边距不能通过它崩溃。结果，样本2中的正边距都没有崩溃。

浮动元素会将其从流中取出，因此新测试中div2的边距可以折叠，因为它没有流入的子元素。

Answer 2

这是一个非常有趣的问题。我之前从未遇到过这种情况，但现在，根据一些文章我发现某些情况可以防止边缘崩溃：

http://www.sitepoint.com/web-foundations/collapsing-margins/

浮动元素
绝对定位元素
内联块元素
将溢出设置为除可见之外的其他元素（他们这样做不要与子女一起贬值。）
已清除的元素（它们不会使用其父块的下边距折叠其上边距。）
根元素

显然溢出会阻止边距折叠，不仅如果它应用于父元素;）

从我看到的其他文章中，这个效果用于几个微型clearfix。

为什么包含流入框的这种盒子的边距会崩溃

2 个答案: