让我们从以下情况开始：

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}

<div></div>

主体定义为最小高度：100vh,我们有一个滚动条,允许我们看到html.在这里,我们有一个边缘折叠,div的边缘与主体边缘折叠,从而在主体和滚动条之后创建这个空间.

如果我们参考specification,我们就有这种情况：

Two margins are adjoining if and only if:

…

bottom margin of a last in-flow child and bottom margin of its parent
if the parent has ‘auto’ computed height

div是最后一个in-flow元素,body是auto auto,因为我们只指定了min-height.

现在让我们添加更多可能受此边际影响的元素,并保持边距折叠规则.唯一的方法是添加浮动元素以保持我们的div始终是最后一个in-flow元素.

这是新代码：

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}
.l {
  width:45%;
  height:50px;
  float:left;
  margin:0;
}
.r {
  width:45%;
  height:50px;
  float:right;
  margin:0;
}

<div></div>
<div class="l"></div>
<div class="r"></div>

我们可以清楚地看到,我们仍然有边缘折叠(因为滚动)并且浮动元素也被相同数量的边距向下推.

所以我的问题是：为什么这样的行为？

我对保证金崩溃的理解是,最后我们只会在某处应用一个保证金.通过添加新元素,我希望有以下两种情况之一：

>添加浮动元素将以某种方式取消边缘折叠(这可能不是这种情况,因为我们没有违反任何规则)
>浮动元素不会受到边缘的影响,因为这个浮动元素与身体边缘折叠并因此移动/应用于身体. (这是我的逻辑案例)

在规范中我也发现了这个复杂的陈述：

Note that the positions of elements that have been collapsed through
have no effect on the positions of the other elements with whose
margins they are being collapsed; the top border edge position is only
required for laying out descendants of these elements.

我从上面可以理解,其他元素不受边缘折叠的影响,因此保持其初始位置,这解释了浮动元素被推下的原因. (顺便说一下,我不确定是否属于这种情况)

如果这是解释,那对我来说有点混乱和不合逻辑.我添加了一个边距,最终我有两个明显可见的边距？

那么为什么会这样呢？或许我错过了规范中的一些内容,而且我们面临的不仅仅是简单的边缘崩溃？

重要提示：在回答之前,请注意我不是要找到解决方法或如何避免这种情况.我知道至少有5种方法可以取消边缘折叠(填充,溢出,边框,弹性框等).我希望了解为什么会发生这种情况.

作为参考：这是从this question开始的,其中@Alohci在我的回答中突出显示了这一点,在几条评论之后我们都没有被说服