margin-top无法使用clear:both

Question

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

为什么margin:top"主要数据"在上面的代码中不起作用？

Answer 1

你可以把两个浮动的div放到另一个有"overflow:hidden"设置的div中:

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

编辑 - 为这个有5年历史的答案添加一点:我认为混淆行为的原因是边际崩溃的过程有些复杂.来自OP的原始HTML的一个好方法是添加如下的CSS规则:

div { border: 1px solid transparent; }

噗!现在(没有我的额外<div>)它工作正常!好吧,除了来自边界的额外像素.特别是,我认为它是clear: both工作方式和边缘折叠规则的组合,导致OP中代码的意外布局.

再次编辑 - 对于完整(并且,我认为,完全准确)的故事,请参阅Mark Amery的优秀答案.细节有一些复杂性,这个答案掩盖了.

Answer 2

虽然Pointy展示了如何在div中包装浮点数,但您也可以在浮点数和主数据部分之间插入一个空div.例如:

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

如果不希望在某些HTML周围添加div包装器,这可能会很有用.

Answer 3

规范背后的逻辑是令人费解的,并且涉及清除规则和崩溃边缘的复杂交互.

你可能熟悉的常规CSS 盒模型,其中内容框包含一个内填充盒包含一个内边界框包含一个内缘盒:

对于clear设置为其他元素的元素,none可以在此模型中引入其他组件:清除.

"无"之外的值可能会引入许可.间隙抑制边缘坍塌,并作为元素边缘上方的间距.

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

但什么时候介绍清关,它应该有多大？让我们从第一个问题开始.规范说:

通过首先确定元素的顶部边界边缘的假设位置来计算设置"清除"的元素的间隙.如果元素的'clear'属性为'none',则该位置是实际顶部边界边缘的位置.

如果元素顶部边界边缘的假设位置未超过相关浮点数,则引入间隙,并且边距根据8.3.1中的规则崩溃.

让我们将这个逻辑应用于提问者的代码.请记住,我们试图在下面的代码中解释第三个div的位置(为了可视化而添加的背景):

<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>

让我们想象一下,正如规范要求我们clear设定none的第三个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>

这里,第三个div 与两个浮动的div 重叠.可是等等; 为什么会这样？当然,允许浮动元素重叠块级别(根据Floats规范,"由于浮动不在流中,因此在浮动框垂直流动之前和之后创建的非定位块框就像浮动不存在一样.),但是我们的第三个div上面有载荷margin-top,并且是在两个浮动的div之后; 不应该两个漂浮的div出现在身体的顶部,第三个div出现200px下降,远低于它们？

不会发生这种情况的原因是第三个div的边距会折叠到div的父级边缘(在这种情况下,是正文 - 但如果你在父div中包含所有三个div,则会发生相同的行为).该折叠利润率规范(省略若干不相关的细节下面引用)告诉我们:

相邻的垂直边距崩溃......

当且仅当以下情况时,两个边距相邻:

• 两者都属于参与相同块格式化上下文的流内块级框
• 没有线盒,没有间隙,没有衬垫,没有边框分开它们......
• 两者都属于垂直相邻的盒子边缘,即形成以下对中的一对:
  • 一个盒子的上边缘和第一个流入的孩子的上边缘
  • ...

在我们的例子中,第三个div当然不是身体的第一个孩子,但它是它的第一个流动儿童.请注意,根据https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme:

如果元素浮动,绝对定位或是根元素,则称其为流出流.如果元素不是流出的,则称其为in -flow.

由于我们示例中的第一个和第二个div是浮动的,因此只有第三个div是in-flow.因此,它的上边距与其母线的上边缘相邻,边缘坍塌 - 向下推动整个身体,包括两个浮动元素.因此,尽管有一个大的,第三个div与其兄弟姐妹重叠margin-top.因此 - 在这个假设的情况下,第三个元素clear设置为none- 我们满足以下条件:

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

从而:

引入清理,边际根据8.3.1中的规则崩溃

清关多少钱？该规范为浏览器提供了两个选项,其中包含两个澄清说明:

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

• 即使在要清除的最低浮点的底部外边缘处放置块的边界边缘所需的量.
• 将块的顶部边缘边缘放置在其假设位置所需的量.

或者,间隙精确地设定为放置块的边缘边缘所需的量,即使要清除最下面的浮子的底部外边缘也是如此.

注意:允许这两种行为等待评估它们与现有Web内容的兼容性.未来的CSS规范将需要一个或另一个.

注意:间隙可以是负数或零.

在我们开始应用这些规则之前,我们立即遇到了并发症.请记住,在假设的案例中我们必须考虑到的崩溃边际clear是none多少？嗯,在我们计算使用许可的非假设情况下不存在,因为间隙的存在会抑制它.回想一下前面引用的8.3.1中的崩溃边际规则,规定边际仅在以下情况下相邻:

• 没有线框,没有间隙,没有填充,没有边框将它们分开

(重点补充).因此,第三个div的上边距和其父母的上边距不再相邻.我们可以在我们的示例代码段中模拟这种预清除方案,通过保持clear: none但添加padding-top: 1px到正文,这也会根据上面引用的规则禁用边距折叠.

body {
  padding-top: 1px;
}

<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>

现在,与边缘倒塌不同的是,我们的第三个分区比两个漂浮的兄弟姐妹还要舒服.但是,我们已经决定,基于一个假设的边缘确实崩溃的情况,必须增加许可; 剩下的就是选择许可数量,以便:

即使要清除最下面的浮动的底部外边缘,也要放置块的边界边缘

因此我们别无选择,只能对第三个div 应用负间隙,以便将其顶部边缘向上拖动以触​​及其上方浮动元素的底部外边缘(也称为边缘边缘).因此,如果浮动元素每个高10px而第三个div具有200px的上边距,则将应用-190px的间隙.最后,这让我们得到了提问者看到的最终结果:

<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>

(请注意,如果您使用浏览器的开发工具检查上面代码段中的第三个div,您仍然可以看到div上方200px的上边距,超出所有其他内容 - 仅仅是整个保证金箱已被大量负面清关拖走.)

简单!

Answer 4

Pointy和Randall Cook有很好的答案.我以为我会再展示一个解决方案.

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

如果你使第3个元素"浮动:左;" AND"clear:both;",它应该具有为第3个元素提供200像素边距的预期效果.这是一个示例的链接.

这也可能会影响其他后续元素是否需要浮动.但是,它也可能具有预期的效果.