我正在阅读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来看，其最高利润率与其母公司一起崩溃，其底部边缘与其兄弟垮台。为什么呢？
答案 0 :(得分：1)
流入块级元素的下边距总是崩溃 除非是，否则它的下一个流入块级兄弟的上边距 那个兄弟姐妹有通关。
clear: both并不一定意味着元素有清除。根据{{3}}，如果没有任何浮动，则可能没有任何清除：
计算设置'clear'的元素的间隙 首先确定元素顶部的假设位置 边缘。这个位置是实际顶部边界边缘的位置 如果元素的“清晰”属性是“无”，那就已经存在了。
如果元素顶部边界的这个假设位置不是 过了相关的浮标，然后介绍了清关，并且有利润 根据8.3.1中的规则崩溃。
编辑1：我创建了一个元素得到实际间隙计算的情况，并得到了相同的结果。所以我想我也错过了这一点。您也有可能发现渲染错误：）
流入块元素的上边距与其第一个边缘折叠 如果元素没有顶部，则流入块级子级的上边距 边界，没有顶部填充，孩子没有间隙。
这里的边框需要在元素本身上，而不是像你的例子那样在孩子身上。
答案 1 :(得分：0)
虽然你的问题有点令人困惑，但如果符合以下条件，则不会崩溃：
你的小提琴没有为外框设置任何边距，并且无论是文档中的最后一个孩子，底部边距都会崩溃。
其他元素在边距上正常工作，没有折叠。如果你指的是盒子1和盒子2只有30px的边缘，因为边缘在盒子模型公式的边界之外，所以最好使用填充，因为你无法避免垂直边缘崩溃两个要素之间的干预因素。