首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么这个非浮动保证金会随着浮动而崩溃?

为什么这个非浮动保证金会随着浮动而崩溃?
EN

Stack Overflow用户
提问于 2014-06-13 02:26:08
回答 1查看 871关注 0票数 3

在调查这个问题有关清除浮标的问题时,我遇到了一种特殊的情况,即保证金和非浮动盒的清关。

根据规范的第8.3.1节,在任何情况下都不应发生边缘塌陷。

  • 产生边距的元素中至少有一个是浮点数,或者
  • 清关在路上。

但是,考虑一系列的浮动框,其中最后一个可以清除其余的:

代码语言:javascript
运行
复制
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
代码语言:javascript
运行
复制
div.container > div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
}

div.container > div:last-child {
    clear: left;
}

如你所料,每个框之间的水平和垂直间隔都是20像素宽。。垂直边距不会崩溃。

但是,当清除元素未被浮动时,它跳跃了10个像素,就好像它的顶部边缘正在塌陷,浮子就在它的正上方。

这种行为完全违背了上面列出的两个条件:

  1. 有许可。
  2. 为了进行清除,首先必须有一些其他浮子清除。清除元素本身没有被浮动这一事实不应该相关。

这种行为在所有浏览器上似乎也是一致的,包括较近期版本的IE.

尽管如此,我并不声称知道CSS浮动模型像我的手背,所以.其他人能解释一下为什么会这样吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-13 02:26:08

没关系,我想是我自己找到的。看起来,我问题中的以下假设是错误的(告诉过您,我没有完全摸索CSS浮动模型):

清除元素本身没有被浮动这一事实不应该相关。

在描述第9.5.2节属性的clear中,它说:

通过首先确定元素的上边框的假设位置来计算设置“清除”的元素的间隙。如果元素的“清除”属性为“无”,则该位置将位于实际的顶部边框边缘。 如果元素的顶部边界边缘的这一假设位置没有超过相关的浮标,则引入清除,并根据8.3.1中的规则进行边距崩溃。 然后将清除量设置为:

  1. :将块的边界边缘放置在要清除的最低浮动的底部外部边缘所需的数量。
  2. 将区块的顶部边沿放置在其假设位置所需的数量。

再往下看,上面写着:

当在浮动元素上设置属性时,它将导致对用于定位浮点数的规则进行修改。增加了一个额外的约束(#10):

  • 浮点的上外缘必须位于所有较早的左浮动框的下外缘以下(在“清除:左”的情况下),或所有较早的右浮动框(在“清除:右”的情况下),或者两者都在。

(强调我的。请注意,“外部边缘”是“边缘”的同义词,如第8.1节中所述。)

本质上,这意味着如果清除元素未被浮动,而且仅靠其上边距并不能使其离浮标足够远,那么元素就会被推到足够高的位置,使其顶部边框正好位于被清除的浮子的底部边缘下面。虽然看起来它的上边距与浮标的底部边边一起塌陷,但实际上,上边距并没有任何有意义的效果,因为它没有到达清除元素的边界边缘。

否则,如果清算元素被浮动,那么它的最高保证金就会被考虑在内,也就是说(符合8.3.1中所述的规则)。

当我写这篇文章的时候,我想起了流中的非浮动元素的位置,就像浮子从来没有在那里一样,因为浮子是从正常流中提取出来的。换句话说,任何在非浮动清算元素上设置的最高保证金都不考虑任何浮标,而不管它是否足以清除。例如,当clearfloat在最后一个元素上被设置为none时,它与容器的边缘平齐,与第一个浮动元素处于完全相同的位置,尽管在它的后面。 (注意,容器块上的边框在它和容器之间崩溃)。

最后,引入间隙这一事实实际上与此特定情况无关,因为只有当元素的clear属性设置为none时,间隙块才会崩溃。由于我们在这里讨论的是浮动,保证金崩溃确实不应该发生正常,因此,无论最后一个元素是否有清除是不相关的(反正不是直接的)。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24196773

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档