相邻兄弟姐妹的边际塌陷

Question

该 赏金 到期 两天内. 对这一问题的回答有资格获得 +100 声望赏金。 特马尼-阿菲夫 想要 酬答:

把赏金交给@Alohci回答。

我在阅读关于保证金崩溃的文章时，发现了这个问题。margin

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

我不明白最后一句话 "除非后一个兄弟姐妹需要清空浮动"。谁能举个例子？

谢谢大家

Answer 1

首先，下面的例子只适用于Windows或Android上的Firefox等基于Gecko的浏览器。ChromeWebkit长期以来都有错误实现清除的历史。

---

我认为这种说法是对规范的误读。该规范实际上说的是

如果且仅在以下情况下，两个页边距是相邻的：两者都属于参与同一块格式化上下文的内流块级框，并且没有行框、没有间隙、没有填充和没有边框将它们分开。

那么，是什么原因导致清除在这里产生影响呢？不是后一个兄弟姐妹的清除，而是一个干扰因素的清除。

考虑这个例子。

.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的margin box和float一样高。在这里，我们可以看到第一个div的margin box和浮动一样高。<b> 元素不需要向下移动以清除浮动，所以它没有间隙。它也没有内容、padding、边框或margin，所以第一个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的margin box比float的高度少了1px. 所以，在这个例子中，我们要清除 <b> 元素向下移动--即它有间隙。现在，第一个div的下边距和下边距的上边距不能折叠，即使该元素仍然没有内容、padding、边框或margins，并且只向下移动了1px。

---

在Chrome浏览器中 clear:left 在...上 <b> 元素导致margin不折叠，不管它是否有间隙，它应该只有在需要向下移动过浮动时才有。