我正在阅读有关保证金崩溃的文章，我发现了这一点：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 中，clear:left on the <b>元素会导致边距不折叠，无论它是否有间隙，只有当它需要向下移动超过浮动时才应该有间隙。