相关疑难解决方法(0)

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

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

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

css layout margin css-float

22
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

css-float ×1

layout ×1

margin ×1