在调查这个问题有关清除浮标的问题时,我遇到了一种特殊的情况,即保证金和非浮动盒的清关。
根据规范的第8.3.1节,在任何情况下都不应发生边缘塌陷。
但是,考虑一系列的浮动框,其中最后一个可以清除其余的:
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
div.container > div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
}
div.container > div:last-child {
clear: left;
}
如你所料,每个框之间的水平和垂直间隔都是20像素宽。。垂直边距不会崩溃。
但是,当清除元素未被浮动时,它跳跃了10个像素,就好像它的顶部边缘正在塌陷,浮子就在它的正上方。。
这种行为完全违背了上面列出的两个条件:
这种行为在所有浏览器上似乎也是一致的,包括较近期版本的IE.
尽管如此,我并不声称知道CSS浮动模型像我的手背,所以.其他人能解释一下为什么会这样吗?
发布于 2014-06-13 02:26:08
没关系,我想是我自己找到的。看起来,我问题中的以下假设是错误的(告诉过您,我没有完全摸索CSS浮动模型):
清除元素本身没有被浮动这一事实不应该相关。
在描述第9.5.2节属性的clear
中,它说:
通过首先确定元素的上边框的假设位置来计算设置“清除”的元素的间隙。如果元素的“清除”属性为“无”,则该位置将位于实际的顶部边框边缘。 如果元素的顶部边界边缘的这一假设位置没有超过相关的浮标,则引入清除,并根据8.3.1中的规则进行边距崩溃。 然后将清除量设置为:
再往下看,上面写着:
当在浮动元素上设置属性时,它将导致对用于定位浮点数的规则进行修改。增加了一个额外的约束(#10):
(强调我的。请注意,“外部边缘”是“边缘”的同义词,如第8.1节中所述。)
本质上,这意味着如果清除元素未被浮动,而且仅靠其上边距并不能使其离浮标足够远,那么元素就会被推到足够高的位置,使其顶部边框正好位于被清除的浮子的底部边缘下面。虽然看起来它的上边距与浮标的底部边边一起塌陷,但实际上,上边距并没有任何有意义的效果,因为它没有到达清除元素的边界边缘。
否则,如果清算元素被浮动,那么它的最高保证金就会被考虑在内,也就是说(符合8.3.1中所述的规则)。
当我写这篇文章的时候,我想起了流中的非浮动元素的位置,就像浮子从来没有在那里一样,因为浮子是从正常流中提取出来的。换句话说,任何在非浮动清算元素上设置的最高保证金都不考虑任何浮标,而不管它是否足以清除。例如,当clear
和float
在最后一个元素上被设置为none
时,它与容器的边缘平齐,与第一个浮动元素处于完全相同的位置,尽管在它的后面。 (注意,容器块上的边框在它和容器之间崩溃)。
最后,引入间隙这一事实实际上与此特定情况无关,因为只有当元素的clear
属性设置为none
时,间隙块才会崩溃。由于我们在这里讨论的是浮动,保证金崩溃确实不应该发生正常,因此,无论最后一个元素是否有清除是不相关的(反正不是直接的)。
https://stackoverflow.com/questions/24196773
复制相似问题