如何`清除`防止边缘崩溃？

Question

margin collapse功能已停用在以下情况下：

如果有间隙的元素的顶部和底部页边被邻接，其边缘崩溃与以下兄弟姐妹的邻接边缘但所得余量不与底部坍塌父块的边缘。

这是什么意思？你能给我一些具体的例子吗？

Answer 1

这确保了明确防止任何后续元素重叠浮游物。

让我们从浮动开始，现在就清除。花车可以溢出其父：

<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完全自我坍塌，导致30像素所计算的空间，那么第二个div坍缩成太，保持空间仅为30像素。

好的，所以我们现在已经有了一个大概的自我崩溃的概念。现在，让我们开始尝试滥用与一个自我崩溃清除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使它不再自我崩溃，但它的底边，然后安全地的底边距崩溃父母代替。