边缘顶部不使用clear:both

你可能熟悉传统的CSS box model 其中 内容框 包含在 填充盒 包含在 边框 包含在 边缘盒 :

对于具有 clear 设置为除 none ,可以向该模型引入一个附加组件: 间隙 .

“无”以外的值可能会引入 间隙 . 间隙抑制边缘塌陷,并充当元素边缘顶部上方的间距。

换句话说,在这些情况下,盒子模型看起来更像这样:

但是什么时候开始有间隙,它应该有多大?让我们从第一个问题开始。规格 says :

通过首先确定元素顶部边界边缘的假设位置,计算设置了“clear”的元素的间隙。如果元素的“clear”属性为“none”,则此位置是实际的上边框边缘所在的位置。

如果元素顶部边界边缘的假设位置不超过相关浮动,则会引入清除,并且根据8.3.1中的规则,边缘会折叠。

让我们把这个逻辑应用到提问者的代码中。请记住,我们正在试图解释下面代码中第三个分区的位置(添加背景以帮助可视化):

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>

让我们想象一下,正如规范要求的那样, 清楚的 设置为 没有人 在第三个分区,而不是 both . 那么上面的代码片段是什么样子的呢?

<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>

这里,第三个分区是 重叠 两个漂浮的潜水器。但是等等,为什么会这样?当然,允许浮动元素重叠块级元素(根据 Floats spec , 由于浮动不在流中,因此浮动框前后创建的非定位块框垂直流动,就好像浮动不存在一样。 但是我们的第三个师有很多 margin-top 在它上面,在两个浮动的分隔符之后;这两个浮动的分隔符是不是应该出现在身体的顶部,而第三个分隔符是不是应该向下200px,就在它们下面?

之所以没有出现这种情况,是因为第三个div的边距会折叠到divs父级的边距中(在本例中,是主体,但如果将所有三个div都包装在父级div中,则会发生相同的行为)。这个 Collapsing margins spec (以下引用,省略了几个不相关的细节)告诉我们:

相邻的垂直边距折叠…

两个边距是 毗邻的 当且仅当:

• 它们都属于同一块格式上下文中的流块级框。
• 没有行框,没有空白,没有填充,没有边框分隔它们…
• 它们都属于垂直相邻的盒子边缘,即形成以下一对:
  • 框的上边距及其第一个流入子框的上边距
  • …

我们例子中的第三个部分肯定不是身体的 第一个孩子 但这是第一次 在流动中 孩子。请注意 https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme :

元素被调用 流出的 如果它是浮动的、绝对定位的或是根元素。元素被调用 在流动中 如果没有断流。

因为我们示例中的第一个和第二个DIV是浮动的,所以只有第三个DIV在流中。因此,它的上边缘与其父级的上边缘相邻,并且边缘折叠-向下推整个主体, 包括 两个浮动元素。因此,尽管第三个分区的 缘顶 . 因此-在这种假设情况下,第三个元素 清楚的 设置为 没有人 -我们满足以下条件:

元素的上边框边缘未超过相关浮动

因此:

根据8.3.1中的规则,引入了间隙和边缘折叠。

间隙有多大?该规范为浏览器提供了两个选项,并提供了一些澄清说明:

然后将间隙量设置为以下值中的较大值:

• 将块的边框边缘与要清除的最低浮动的底部外边缘齐平所需的量。
• 将块的上边界边缘置于其假设位置所需的量。

或者,间隙精确设置为放置块的边界边缘所需的量,即使是要清除的最低浮动的底部外边缘。

注: 这两种行为在与现有Web内容的兼容性评估之前都是允许的。未来的CSS规范将需要一个或另一个。

注意:间隙可以为负或零。

在我们开始应用这些规则之前,我们马上遇到了一个复杂的问题。记住,我们必须在 假设 情况在哪里 清楚的 是 没有人 ?嗯,它 不 存在于此 非假设 在这种情况下,我们计算要使用的间隙,因为间隙的存在会抑制它。回忆起 collapsing margin rules from 8.3.1 ,在前面引用,指示页边距仅为 毗邻的 如果:

• 无线盒, 无间隙 ,没有填充和边框分隔它们

(增加了重点)。因此,第三个分区的上边距和其父分区的上边距不再相邻。我们可以通过保持 clear: none 但加入 padding-top: 1px 根据上面引用的规则,也可以禁用页边距折叠。

body {
  padding-top: 1px;
}

<DIV style=“float:left;background:red;”>左</DIV>
<DIV style=“float:right;background:green;”>右</DIV>
<DIV style=“clear:none;margin-top:200px;background:blue;”>主数据</DIV>

现在,与利润率崩溃时不同的是,我们的第三个分区舒服地位于它的两个浮动兄弟分区之下。但是我们已经根据假设的情况决定了 做 折叠,必须增加间隙;剩下的就是选择 数量 为了:

放置块的边界边缘,使其与要清除的最低浮动的底部外边缘齐平。

所以我们别无选择只能申请 消极的 与第三个分区的间隙,以便拖动其顶部 边界边缘 向上触摸底部 外缘 (也称为 边缘边缘 )上面漂浮的元素。因此,如果浮动元件各为10px高,而第三个分区的上边缘为200px,则应用-190px的间隙。最后,我们得到了提问者看到的最终结果:

<DIV style=“float:left;background:red;”>左</DIV>
<DIV style=“float:right;background:green;”>右</DIV>
<DIV style=“clear:both;margin-top:200px;background:blue;”>主数据</DIV>

(请注意,如果您使用浏览器的dev工具检查上面代码片段中的第三个div,您仍然可以看到该div上方的上边距为200px,远远超过所有其他内容-这只是因为整个边距框被大的负间隙拉向上。)

简单!