CSS：清理解决方案，浮动元素时的边际崩溃问题 [英] CSS: clean solution to the margin collapse issue when floating an element
问题描述
示例HTML + CSS：
< html&
< body style =padding：0; margin：0;>
< div style =float：right;>第一< / div>
< div style =margin-top：2em;>第二< / div>
< / body>
< / html>
想要的行为： c $ c> div浮动到窗口的右上角。 实际行为：会在所需位置下方浮动2em。 原因： 利润率崩溃。
尽管识别了问题，我可以想出的解决方案感觉像hacks：
- code> body style to
margin：-1px 0 0 0; border-top：1px solid;。 - 插入
< div style =height：1px; margin-bottom：-1px; < / div>之前 - 插入上述
< div> 之间之间
向 body 添加 overflow：hidden; 应该可以解决您的问题。它定义了一个新的块格式化上下文，如本文所述：溢出的魔力：隐藏。
jsFiddle演示（ body 标签是由jsFiddle自动添加的，这就是为什么我没有将它包含在HTML标记中）
UPDATE （thx to @clairesuzy）：如果 body 有 padding：0 ，此解决方案不起作用。直到我能找到一个更好的方法，我只能建议在两个div（至少我应该现在@ Marcel的downwote :)添加一个包装，我仍然认为比OP发布的解决方案更清洁。我通常在浮动的东西添加一个包装器（使大多数时候更容易处理旧的浏览器），大多数时候，它不需要故意添加，因为它在逻辑和语义上是必需的。
现在，我可以想出这个：
< body style = padding：0; margin：0;>
< div id =containerstyle =overflow：hidden;>
< div style =float：right;>第一< / div>
< div style =margin-top：2em;>第二< / div>
< / div>
< / body>
更新2 ：在考虑通过阅读评论后，我真的认为 overflow：hidden （或除了 overflow：visible 之外的任何东西）是正确的解决方案。唯一的例外是它不为我工作的是设置在 body 元素，这是一个非常罕见的情况。在这些罕见的情况下，你可以尝试使用 position：absolute; top：0;另一种可能的解决方法是：我还发现设置 display：inline-right = 0;
<块;
http://jsfiddle.net/Sxqxw/2/rel =noreferrer> jsFiddle演示
Example HTML+CSS:
<html>
<body style="padding: 0; margin: 0;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</body>
</html>
Desired behavior: the first div floats to the top-right of the window. Actual behavior: it floats 2em below the desired position. Reason: margin collapsing.
Despite identifying the problem, the solutions I can come up with feel like hacks:
- change
bodystyle tomargin: -1px 0 0 0; border-top: 1px solid;. - insert
<div style="height: 1px; margin-bottom: -1px;"></div>beforefirst - insert the above
<div>between thefirstandsecond
Is there a clean, idiomatic way of avoiding this issue?
Adding overflow: hidden; to the body should solve your problem. It defines a new block formatting context as described in this article: The magic of overflow: hidden.
jsFiddle Demo (the body tag is automatically added by jsFiddle, that's why I haven't included it in the HTML markup)
UPDATE (thx to @clairesuzy): This solution does not work if body has padding: 0. Until I can find a better way, I can only suggest to add a wrapper around the two divs (at least I deserve now @Marcel's downwote :)), which I still think is cleaner than the solutions posted by the OP. I normally add a wrapper around floated stuff anyways (makes it easier to handle older browsers most of the time), most of the time it does not need to be added deliberately, because it is logically and semantically required.
So for now, I can come up with this:
<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>
UPDATE 2: After thinking it through, and reading comments, I really think that overflow: hidden (or anything other than overflow: visible) on the container is the right solution. The only exception where it did not work for me is setting it on the body element, which is a very rare situation anyways. In these rare situations, you can try using position: absolute; top: 0; right: 0; instead of floating.
Another possible workaround: I have also found that setting display: inline-block; width: 100%; on body works indeed.
这篇关于CSS：清理解决方案，浮动元素时的边际崩溃问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
