CSS:浮动元素时边距折叠问题的干净解决方案 [英] CSS: clean solution to the margin collapse issue when floating an element

查看：32 发布时间：2021/12/24 23:19:39 css layout css-float margin

本文介绍了CSS:浮动元素时边距折叠问题的干净解决方案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

示例 HTML+CSS:

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

期望的行为:first div 浮动到窗口的右上角.实际行为:它在所需位置下方浮动 2em.原因: 边距下降.

尽管确定了问题，但我想出的解决方案感觉像是黑客:

将 body 样式更改为 margin: -1px 0 0 0;边框顶部:1px 实心；.
在first

<div style="height: 1px; margin-bottom: -1px;"></div>

在first和second

是否有一种干净、惯用的方法来避免这个问题?

解决方案

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

jsFiddle Demo(body 标签是 jsFiddle 自动添加的，这就是为什么我没有将它包含在 HTML 标记中)

UPDATE(感谢@clairesuzy):如果body 具有padding: 0，则此解决方案不起作用.在我找到更好的方法之前，我只能建议在两个 div 周围添加一个包装器(至少我现在应该得到@Marcel 的 downwote :))，我仍然认为这比 OP 发布的解决方案更清晰.无论如何，我通常会在浮动内容周围添加一个包装器(使其在大多数情况下更容易处理旧浏览器)，大多数情况下不需要故意添加它，因为它在逻辑和语义上都是必需的.

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

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

jsFiddle 演示

更新 2:经过深思熟虑并阅读评论后，我真的认为 overflow: hidden(或任何除了 overflow:visible>) 在容器上是正确的解决方案.它对我不起作用的唯一例外是将它设置在 body 元素上，这无论如何都是非常罕见的情况.在这些罕见的情况下，您可以尝试使用 position: absolute;顶部:0；right: 0; 而不是浮动.

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

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 body style to margin: -1px 0 0 0; border-top: 1px solid;.
insert <div style="height: 1px; margin-bottom: -1px;"></div> before first
insert the above <div> between the first and second

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>

jsFiddle Demo

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.

jsFiddle Demo

这篇关于CSS:浮动元素时边距折叠问题的干净解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

CSS:浮动元素时边距折叠问题的干净解决方案 [英] CSS: clean solution to the margin collapse issue when floating an element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

CSS:浮动元素时边距折叠问题的干净解决方案 [英] CSS: clean solution to the margin collapse issue when floating an element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭