Css 当存在间隙时，为什么边缘会塌陷？

缔约国指出：

流内块级别元素的底部边距总是与其下一个流内块级别同级元素的顶部边距一起塌陷，除非该同级元素具有间隙

但是我发现了一些意想不到的事情

<div style="margin-bottom: 100px; "></div>
<div style="float:left;width:10px;height: 10px; background: red"></div>
<div style="margin: 100px;clear: left"></div>
test

测试

第一个

div

的底部边距和第三个

div

折叠的边距违反了“除非兄弟姐妹有许可”

---

如何解释这种情况？你能给我一些具体的例子来更准确地解释上述规则吗？

问题的前提是不正确的。除第一种情况外，所有情况下的利润都不会崩溃

最简单的情况是铬，在给出的示例中，第三个元素确实有间隙，第一个div的底部边缘不会与第三个div的边缘塌陷，计算的间隙为-90px。因此，第三个盒子的顶部与容器顶部的距离为100px+100px-90px=110px

CSS 2.2规范中关于

clear

属性的示例2中描述了此计算

类似地，在Firefox或Edge中，如果示例前面有一些内容，或者即使主体只是有一个上边框，那么边距不会塌陷，间隙为-90px

---

例外情况是Firefox和Edge中没有前面的内容或正文顶部边框。在这种情况下，“边”不会折叠边距，而是将间隙计算为0。Firefox会折叠边距。

如果第三个div的“clear”属性为“none”，则第三个div的上边框边缘会被推到浮动元素的右侧。如何理解“过去”这个词？“第一个div的底边和第三个div的边折叠，，，，“| |在Chrome上它们不会折叠，你在使用什么浏览器？