清除时边距崩溃：两者都存在

Question

我正在阅读CSS Spec 2.1，但无法理解：

流入块级元素的下边距总是折叠 与其下一个流入块级兄弟的上边距，除非 那个兄弟有权限。

还有这个：

流入块元素的上边距与其第一个元素一起折叠 如果元素没有顶部，则流入块级子级的上边距 边框，没有顶部填充，孩子没有间隙。

请检查这个JSFiddle，第一个孩子有clear:both，它有border：

<div style="margin: 100px">
    <div style="margin: 30px; border: 1px solid red">First one</div>
    <div style="margin: 30px; clear: both">Second one</div>
</div>
<div style="clear: both">Outside box</div>

但是从 Chrome Inspect 来看，它的上边距与其父级一起折叠，其下边距与其兄弟级一起折叠。为什么？

Answer 1

流入块级元素的下边距总是折叠 与其下一个流入块级兄弟的上边距，除非 那个兄弟有权限。

clear: both 并不一定意味着该元素有间隙。根据this section的说法，如果没有浮动，可能也没有清除：

计算设置了'clear'的元素的间隙已完成 通过首先确定元素顶部的假设位置 边界边缘。这个位置是实际顶部边框边缘的位置 如果元素的“clear”属性为“none”，则为“none”。

如果元素上边框边缘的这个假设位置不是 过去相关的浮动，然后引入间隙，和边距 按照8.3.1中的规则折叠。

编辑 1：我创建了一个案例，在该案例中元素得到了真正的间隙计算，并得到了相同的结果。所以我想我也错过了这一点。还有可能你发现了一个渲染错误:)

---

流入块元素的上边距与其第一个元素一起折叠 如果元素没有顶部，则流入块级子级的上边距 边框，没有顶部填充，孩子没有间隙。

此处的边框需要在元素本身上，而不是在您的示例中的子元素上。

Answer 2

虽然您的问题有点令人困惑，但如果出现以下情况，请不要折叠页边距：

1. 浮动
2. 绝对定位
3. 内联块
4. 溢出任何不可见的东西
5. 根元素

您的小提琴根本没有为外框设置边距，无论是文档中的最后一个孩子，底部边距都会折叠。

其他元素与边距正常工作，没有一个折叠。如果您指的是框 1 和框 2 的边距只有 30px，因为边距在框模型公式中的边框之外，因此使用填充代替是明智的，因为您无法避免垂直边距折叠两个元素之间的中间元素。