相邻兄弟姐妹的保证金折叠

Question

我在阅读保证金崩溃时遇到了这个：margin

Adjacent siblings The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).

我不明白最后一句话 "except when the latter sibling needs to be cleared past floats"。有人可以举个例子吗？

谢谢

Answer 1

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

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

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context and no line boxes, no clearance, no padding and no border separate them

那么清关在这里起作用的原因是什么？不是后一个兄弟的间隙，而是中间元素的间隙。

考虑这个例子。

.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 中，<b> 元素上的 clear:left 导致边距不折叠，无论它是否有间隙，如果它应该只有需要向下移动超过浮动。

相邻兄弟姐妹的保证金折叠

Margin Collapse for Adjacent siblings

css

margin

css-float