相邻兄弟项的边际折叠 [英] Margin Collapse for Adjacent siblings

问题描述

我正在读关于边际利润缩水的报道，我偶然发现了这一点：margin

相邻兄弟项相邻兄弟项的页边距已折叠 (后一个同级需要清除浮点后的情况除外)。

我不理解最后一个短语"除非后面的兄弟需要清除浮点数"。谁能举个例子？

谢谢

推荐答案

首先，下面的示例仅适用于基于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>元素会将其向下移动-即它有间隙。现在，即使元素仍然没有内容、填充、边框或边距并且仅向下移动1px，第一个div的下边距和下div的上边距也无法折叠。

---

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

这篇关于相邻兄弟项的边际折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！