在我开始之前,所有浏览器中都会呈现滚动条的问题,但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>