在我开始之前，所有浏览器中都会呈现滚动条的问题，但Firefox是一个与此处所询问的问题不同的问题。当父元素与其子元素之间min-height的边距不相邻时，Firefox不会折叠其父元素与其子元素之间的边距。在Firefox中，这也是已知的违反规范的问题，目前仍在解决，尚待解决。
现在，讨论当前的问题。从第9.5.1节开始（关于浮动）：
4. 浮动框的外部顶部不得高于其包含的块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像是有一个空的匿名块父级参与了流程。这样的父母的位置由保证金崩溃部分中的规则定义。
该引号中的最后一句很尴尬，但是“规则”是指（和链接）崩溃的定义。虽然您从该部分引用的特定文本是相关的，但并未说明浮动内容为何尊重流入量的余量div。
这样做：
如果框的顶部和底部边距相邻，则边缘可能会通过它塌陷。在这种情况下，元素的位置取决于其与其边距被折叠的其他元素的关系。
[…]
否则，要么元素的父级不参与边距崩溃，要么仅涉及父级的底边距。元素的顶部边框边缘的位置与元素的底部边框非零时的位置相同。
注意最后一句话。如您所知，底部边框不为零将消除边距折叠。这意味着浮子的位置就好像流入流的底部边缘div并且body元素 没有 塌陷，导致浮子似乎尊重流入流的底部边缘div。
我如何知道浮标专门考虑流入量的底边div而 不是 倒塌边？通过提供body比流入流量更大的底边距，div并观察它不会影响浮子的位置，请执行以下操作：
html {
background: red;
}
body {
margin: 0;
margin-bottom: 100px;
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>
602392714
清零编程群