相邻兄弟姐妹的边距折叠

Question

我正在阅读关于 Margin Collapsing 的文章，我发现了这个：margin

相邻兄弟姐妹 相邻兄弟姐妹的边距被折叠（除非后一个兄弟姐妹需要清除浮动）。

我不明白最后一句话“除非后一个兄弟需要清除浮动”。有人可以举个例子吗？

谢谢

Answer 1

首先，以下示例仅适用于基于 Gecko 的浏览器，例如 Windows 或 Android 上的 Firefox。Chrome/Webkit 长期以来一直错误地执行清除操作。

我认为该声明是对规范的误解。规范实际上说的是

两个边距相邻当且仅当：

两者都属于参与相同块格式化上下文的流入块级框，并且没有行框、没有间隙、没有填充和没有边框将它们分开

那么是什么导致清除在这里产生影响呢？这不是后一个兄弟的间隙，而是中间元素的间隙。

考虑这个例子。

.container {
  overflow:auto;
  border:2px solid;
}
span {
  float:left;
  width:100px;
  height:100px;
  background:red;
  opacity:0.2;
}
.container > div {
  height:60px;
  margin:20px 0;
  background:blue;
}
b {
  display:block;
  clear:left;
}

<p><strong>View this in Firefox</strong></p>
<div class="container">
  <span></span>
  <div></div>
  <b></b>
  <div></div>
</div>

在这里我们可以看到第一个 div 的边距框和浮动一样高。该<b>元件不需要向下移动以清除浮所以它没有间隙。它也没有内容、内边距、边框或边距，因此第一个 div 的下边距与第二个 div 的上边距折叠在一起。

但是，在这个例子中：

.container {
  overflow:auto;
  border:2px solid;
}
span {
  float:left;
  width:100px;
  height:100px;
  background:red;
  opacity:0.2;
}
.container > div {
  height:59px;
  margin:20px 0;
  background:blue;
}
b {
  display:block;
  clear:left;
}

<p><strong>View this in Firefox</strong></p>
<div class="container">
  <span></span>
  <div></div>
  <b></b>
  <div></div>
</div>

第一个 div 的边距框比浮动的高度短 1px。因此，<b>元素的清除会将其向下移动 - 即它具有间隙。现在第一个 div 的底部边距和底部 div 的顶部边距无法折叠，即使元素仍然没有内容、填充、边框或边距并且仅向下移动 1px。

在 Chrome 中，元素clear:left上的<b>导致边距不会折叠，无论它是否有间隙，只有在需要向下移动超过浮动时才应该有间隙。