css - 为什么存在间隙时边距会崩溃？

Question

spec声明:

The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

但我发现了意想不到的东西。code如下。

<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 的边距折叠，这违反了“除非兄弟有间隙”。

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

Answer 1

问题前提不正确。对于除一种情况外的所有情况，边距都不会崩溃。

最简单的情况是 Chrome，在给定的示例中，第三个元素确实有间隙，第一个 div 的底部边距不会与第三个 div 的边距重叠，并且计算出的间隙是-90px。所以第三个盒子的顶部距离容器顶部 100px + 100px - 90px = 110px。

此计算在 CSS 2.2 规范中针对 clear 属性的示例 2 中进行了描述。

同样，在 Firefox 或 Edge 中，如果 example 前面有一些内容，或者即使 body 只是有一个顶部边框，那么 margins 也不会塌陷，间隙为 -90px；

异常(exception)情况是在 Firefox 和 Edge 中，当没有前面的内容或主体的顶部边框时。在这种情况下，Edge 不会折叠边距并将间隙计算为 0。Firefox 会折叠边距。