【问题标题】：how `clear` prevent margin collapsing?`clear` 如何防止边距崩溃？
【发布时间】：2017-07-23 00:22:33
【问题描述】：

margin collapse 在以下情况下被禁用：

如果一个有间隙的元素的上边距和下边距是相邻的，它的边距会与相邻兄弟的相邻边距一起折叠，但生成的边距不会与父块的底部边距折叠。

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

【问题讨论】：

你的问题不够清楚。发布您的代码也有帮助。
@jnkrois 这是一个规范问题，而不是关于某些特定代码的问题。我个人觉得这很清楚，因为我一直致力于在浏览器引擎中实现边距折叠，但是带有示例的完整答案相当详细。在这里找到答案的最佳位置是 CSS 测试存储库中的规范合规性测试。
试试developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/…

标签： css margin

【解决方案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>

然而，边距折叠会破坏一些东西，因为后面的元素可以“穿过”某些东西折叠，一直到顶部边距的最顶端。让我们快速浏览一下边距折叠的某些方面。

自我折叠技巧

通常，边距折叠适用于 any 上边距，它直接接触 any 下边距。

这也包括一个元素自己的顶部/底部边距。这称为自折叠，边距折叠会反复发生。下面是这两个方面的一个简单示例：

<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 中添加一些文本使其不再自动折叠，但它的下边距然后安全地与父级的下边距一起折叠。

【讨论】：