示例HTML CSS：
<html>
<body style="padding: 0; margin: 0;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</body>
</html>
期望的行为：第一个div浮动到窗口的右上角。实际行为：它浮动2em低于期望的位置。原因：margin collapsing。
尽管确定问题，我可以想出的解决方案感觉像黑客：
>改变身体风格到边距：-1px 0 0 0; border-top：1px solid;
> insert< div style =“height：1px; margin-bottom：-1px;”>< / div>之前
>插入上述< div>在第一和第二之间
有没有一个干净，惯用的方式来避免这个问题？
解决方法
添加overflow：hidden;对身体应该解决你的问题。它定义了一个新的块格式化环境，如本文所述：
The magic of overflow: hidden。
jsFiddle Demo(body标签由jsFiddle自动添加，这就是为什么我没有将它包含在HTML标记中)
UPDATE(thx to @clairesuzy)：如果body有padding，则此解决方案不起作用：0。直到找到一个更好的方法，我只能建议在两个div之间添加一个包装(至少我现在应该是@ Marcel的下注： ))，我认为比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>
更新2：经过思考，阅读评论后，我真的认为在容器上的溢出：隐藏(或溢出：可见的东西)是正确的解决方案。唯一的例外，它不适用于我是将其设置在身体元素，这是一个非常罕见的情况。在这些罕见的情况下，您可以尝试使用position：absolute;顶部：0;权利：0;而不是浮动。
