CSS:浮动元素时对边距折叠问题的清晰解决方案

Question

CSS:浮动元素时对边距折叠问题的清晰解决方案

jam*_*her 22 css layout margin css-float

示例HTML + CSS:

<html>
  <body style="padding: 0; margin: 0;">
    <div style="float: right;">first</div>
    <div style="margin-top: 2em;">second</div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

所需的行为:将firstDIV浮到窗口的右上角. 实际行为:它漂浮在所需位置下方2em处. 原因: 保证金崩溃.

尽管发现了问题,但我能提出的解决方案感觉就像黑客一样:

改变body风格 margin: -1px 0 0 0; border-top: 1px solid;.
<div style="height: 1px; margin-bottom: -1px;"></div>之前插入first
<div>在first和之间插入上面的内容second

是否有一种清洁,惯用的方法来避免这个问题？

Answer 1

kap*_*apa 22

添加overflow: hidden;到body应该解决您的问题.它定义了一个新的块格式化上下文,如本文所述:溢出的魔力:隐藏.

jsFiddle演示(body标签由jsFiddle自动添加,这就是为什么我没有将它包含在HTML标记中)

更新(thx to @clairesuzy):如果body有,此解决方案不起作用padding: 0.在我找到更好的方法之前,我只能建议在两个div之间添加一个包装器(至少我现在应该得到@ Marcel的downwote :)),我仍然认为它比OP发布的解决方案更清晰.我通常会在浮动的东西周围添加一个包装器(大多数时候都可以更容易地处理旧的浏览器),大多数情况下它不需要故意添加,因为它在逻辑上和语义上都是必需的.

所以现在,我可以想出这个:

<body style="padding: 0; margin: 0;">
   <div id="container" style="overflow: hidden;">
       <div style="float: right;">first</div>
       <div style="margin-top: 2em;">second</div>
   </div>
</body>

Run Code Online (Sandbox Code Playgroud)

jsFiddle演示

更新2:经过深思熟虑并阅读评论后,我认为容器上的overflow: hidden(或其他任何东西overflow: visible)是正确的解决方案.它对我不起作用的唯一例外是在body元素上设置它,这是一种非常罕见的情况.在这些极少数情况下,您可以尝试使用position: absolute; top: 0; right: 0;而不是浮动.

另一种可能的解决方法:我还发现,设置display: inline-block; width: 100%;在body工作确实.

jsFiddle演示

切换了我的投票.在"wrap"元素上设置`overflow:hidden`不仅是解决这个问题的一个很好的解决方案,而且可能已经常用于清除浮点数. (3认同)
@bazmegakapa你的答案很好,只是没有应用于`body`元素,这在现实世界的场景中是不太可能的..溢出隐藏在父元素上,即添加一个容器div(除了body,这是根格式化上下文) ) 将工作.你不太可能想要在源代码中浮动第一个元素而不想让它有某种容器div;) (2认同)

Answer 2

Jaw*_*wad 1

添加float: left;到第二个 div。

小提琴

归档时间：	14 年，5 月前
查看次数：	18048 次
最近记录：	7 年，9 月前