保证金崩溃和清除

Question

我正在阅读W3C规范，我真的不明白that one：

  

如果带间隙的元素的顶部和底部边距是   相邻的，它的边缘随着邻接的边缘而崩溃   跟随兄弟姐妹，但结果边缘不会崩溃   父块的下边距。

任何人都可以向我解释或者为它翻译它？

Answer 1

是。在Firefox或IE.¹

中查看此jsfiddle

<style>
  .case { width:200px; background-color:yellow; }

  .container { background-color:lightblue; margin-bottom:70px; padding-top:0.01px; }
  .preface { float:left; height: 58px; width: 100px; border: 1px solid red; }
  .one .intro { clear: left; margin-top:60px; }
  .two .intro { clear: left; margin-top:59px; }
</style>

<div class="case one">
    <div class="container">
        <div class="preface">
            lorem ipsum
        </div>
        <div class="intro"></div>
    </div>
    after
</div>
<hr>
<div class="case two">
    <div class="container">
        <div class="preface">
            lorem ipsum
        </div>
        <div class="intro"></div>
    </div>
    after
</div>

（除了类名“one”或“two”以及它们应用的CSS之外，情况是相同的。padding-top:0.01px;是为了阻止简介块的margin-top值折叠到margin-top中（容器）

当一个元素应用了clear值，使其框实际向下移动时，它表示 clearance 。我们可以看到这种情况发生在两个案例中。在第一种情况下，该框仍然具有clear:left，但其上边距足够大，元素框不需要移动，因此它没有间隙。

现在看一下结果。

在第一种情况下，容器上的70px底部边距与.intro div的顶部边缘折叠，在.container div的顶部与文本“after”之间留下一个70px的距离。在第二种情况下，因为.intro div有间隙，根据规范的引用部分，容器的底部边缘不得与.intro div的上边缘一起折叠。因此应用了上边距，导致浅蓝色背景区域，然后单独应用容器的下边距，从而产生黄色背景区域。

¹_{不幸的是，Chrome得到了这个可怕的错误。}