更新 ：以下行为在Firefox上不可见。

让我们从以下情况开始：

html {

  background: red;

}



body {

  margin: 0;

  min-height: 100vh;

  background-color: green;

}



div {

  min-height: 50px;

  background-color: pink;

  margin-bottom: 50px;

}


<div></div>

主体用定义，min-height:100vh我们有一个滚动条，让我们可以看到html。在这里，我们有一个 margin-colapsing
，边距div与主体边距一起折叠，从而在主体和滚动条之后创建此空间。

如果我们参考规范，则有这种情况：

当且仅当以下情况，两个边距相邻：

…

最后一个流入子项的底边距及其父项的底边距（如果父级具有“自动”计算的高度）

该元素div是 最后一个流入 元素，并且body具有高度自动值，因为我们仅指定了最小高度。

现在，让我们添加更多可能受此边距影响的元素，并保留边距折叠规则。唯一的方法是添加 浮动 元素，以使我们div始终是最后一个流入元素。

这是新代码：

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>

正如我们可以清楚地看到的那样，由于滚动的缘故，我们仍然有边际崩溃，并且浮动元素也被下压了相同数量的边际。

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

我对保证金崩溃的理解是，最后，我们将仅在某处应用 一个 保证金。通过添加新元素，我期望会出现以下两种情况之一：

1. 添加浮动元素将以某种方式取消边距崩溃 （这不会发生，因为我们没有违反任何规则）
2. 浮动元素不会受到边距的影响，因为此元素随着身体边缘塌陷并因此移动/应用到了身体。 （这对我来说是一个逻辑案例）

在规范中，我还发现了以下 复杂 语句：

请注意，已折叠的元素的位置对其他以其边距折叠的元素的位置没有影响；仅在布置这些元素的后代时才需要顶部边框边缘位置。

从以上内容可以理解，其他元素不受边界收缩的影响，因此保持其初始位置，这解释了为什么浮动元素被向下推。 （我不确定是否是这种情况）

如果这是解释，那么对我来说有点混乱和不合逻辑。我增加了 一个 边距，最后却有 两个 清晰可见的边距？

那么为什么会这样呢？还是我错过了规范中的某些内容，而我们所面临的不仅仅是简单的边际崩溃？

重要提示
：在回答之前，请注意，我不是在寻求解决此问题的方法，也不希望如何避免此问题。我知道至少有5种方法可以取消边距折叠（填充，溢出，边框，弹性框等）。我想了解为什么会发生这种情况。

供参考 ：这是从这个问题开始的，@Alohci在我的回答中突出了这一点，经过几番评论，我们俩都没有被说服