margin collapse在以下情况下出现问题：
如果具有间隙的元素的顶部和底部边距相邻，则其边距会随着后续兄弟的邻接边缘而折叠，但所产生的边距不会随着父块的下边缘而崩溃。
这是什么意思？你能给我一些具体的例子吗？
答案 0 :(得分：4)
这可确保明确防止任何后续元素与浮动重叠。
让我们从花车开始，现在就清楚了。浮动可以溢出其父级：
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
That red box overflows!
</div>
如果我们添加一个清算div，它永远不会。很清楚就像说没有别的东西可以超越这条线：
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<div style='clear:both;'></div>
<!-- Anything down here will not overlap the floats -->
</div>
然而，保证金崩溃会对事情造成一些影响，因为以下元素可能会崩溃“通过”某些东西，一直到顶部边缘的最顶端。让我们快速浏览一下保证金崩溃的某些方面。
一般情况下，保证金折叠适用于直接触及任何底部保证金的任何上边距。
这包括元素拥有的顶部/底部边距。这称为自我崩溃，边距折叠重复发生。以下是这两个方面的快速示例：
<div style='margin-top:30px; margin-bottom:30px;'></div>
<div style='margin-top:30px; border:1px solid black;'>
The gap above me is only 30px, not 90!
</div>
第一个div完全自我折叠，导致计算空间为30px，然后第二个div也会折叠成这样，保持空间仅为30px。
好的，我们现在已经大致了解了自我崩溃的原因。现在让我们开始尝试用自我崩溃的清算div 来滥用它：
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<div style='clear:left;margin-top:90px;margin-bottom:90px;'></div>
I'm after the clear and look, no 90px gap!
</div>
虽然保证金仍然存在。它实际上比浮动向上运行 90px。
接下来，想象一下之后没有文字，父母有一个底边。根据我们的保证金折叠规则，它应该向上崩溃。同胞元素甚至可能会“彻底”崩溃，一直到顶部。我们不希望这样，因为它会导致一些不必要的重叠。
规范的这一部分阻止了这种行为。让我们打破规范的语言，使其更清晰：
如果带间隙的元素的顶部和底部边距相邻
这是描述一个已经清除浮动的自崩溃元素。
其利润率随着兄弟姐妹的相邻边缘而崩溃
其他边缘可能会崩溃，但是......
结果边距不会因父块的下边距而崩溃。
..最底部边缘不得向上坍塌，因为这会导致我们尴尬的重叠案例。
以下是应用规则的示例：
<div style='border:1px solid green;'>
<!-- A parent block with a bottom margin, and no border -->
<div style='margin-bottom:50px;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<!-- A self collapsing cleared div -->
<div style='clear:left;margin-top:50px;margin-bottom:50px;'></div>
<!-- The parents bottom margin is adjacent to our collapsed margin,
but it gets blocked from collapsing upwards. We see a gap here -->
</div>
</div>
在清算div中添加一些文本会使其不再自动崩溃，但其底部边距会安全地与父级的底部边缘折叠。