Css 为什么非浮动保证金会随着浮动而崩溃？

在调查清除浮动时，我遇到了一种特殊情况，即使用非浮动框进行边距和清除

根据规范的规定，在以下情况下均不应发生边缘塌陷：

• 生成边距的元素中至少有一个是浮点，或
• 清除障碍

但是，考虑一系列浮动框，最后一个清除其余部分：

div.container>div{
浮动：左；
宽度：50px；
高度：50px；
利润率：10px；
}
div.container>div:最后一个子级{
清除：左；
}

如你所料。垂直边距不会塌陷

但是，当清算元素不浮动时

这种行为完全违背了上述两种条件：

有许可证

为了获得间隙，首先必须清除一些其他浮子。清算要素本身没有浮动的事实不应该是相关的

这种行为似乎在所有浏览器中都是一致的，包括IE的最新版本

---

这就是说，我并不声称像我的手背一样了解CSS浮动模型，所以。。。其他人能解释为什么会这样吗？

没关系，我想是我自己发现的。看起来我问题中的以下假设是错误的（告诉你我没有完全理解CSS浮动模型）：

清算要素本身没有浮动的事实不应该是相关的

在中，它描述了

clear

属性，它表示：

通过首先确定元素上边界边缘的假设位置，计算设置了“清除”的元素的间隙。如果元素的“clear”属性为“none”，则此位置是实际的上边框边缘所在的位置

如果元素上边界边缘的假设位置未超过相关浮动，则引入间隙，并根据8.3.1中的规则折叠边距

然后，间隙量设置为以下值中的较大值：

将块的边界边缘与待清除的最低浮动的底部外边缘对齐所需的量。

将块的上边界边缘放置在其假设位置所需的量

再往下看，上面写着：

当在浮动元素上设置属性时，它会导致修改用于定位浮动的规则。增加了一个额外的约束条件（#10）：

• 浮动的顶部外边缘必须低于所有早期左侧浮动框（在“清除：左侧”的情况下）或所有早期右侧浮动框（在“清除：右侧”的情况下）的底部外边缘，或两者（清除：两者）的下部外边缘

（请注意，“外边缘”与“边缘边缘”同义，如中所述。）

从本质上说，这意味着如果清除元素没有浮动，并且其上边距本身没有将其推离浮动足够远，则该元素被推到刚好使其上边距位于被清除浮动的下边距的正下方。虽然看起来它的上边距好像与浮动的下边距一起塌陷，但实际上，上边距没有任何有意义的效果，因为它没有到达清算元素的边界边缘

否则，如果清算要素是浮动的，那么可以说，其最高保证金将被考虑在内（与8.3.1中规定的规则一致）

在我写这篇文章的时候，我记得流中非浮动元素的位置就好像从来没有浮动过一样，因为浮动是从正常流中取出来的。换句话说，在非浮动清算元素上设置的任何顶部保证金都不考虑任何浮动，无论其是否足以进行清算。例如，当最后一个元素上的

clear

和

float

都设置为

none

时，（请注意，容器块边距上的边框在它和容器之间折叠）

---

最后，引入间隙的事实在这种特定情况下实际上并不相关，因为间隙仅在元素的

clear

属性设置为

none

时，才会阻止边距折叠。因为我们在这里讨论浮动，保证金崩溃确实不会正常发生，因此最后一个元素是否有间隙并不相关（无论如何不是直接的）。

是的，我真的应该看到这一点（事实是我自己在规范中找到了答案，在写问题的时候…。很好的研究和答案！