css – margin-top不工作与clear：both

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

为什么是边距：“主数据”的顶部不工作在上面的代码？

解决方法

你可以把两个浮动的div放到另一个有“overflow：hidden”设置的div：

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

编辑 – 添加一点到这个5岁的答案：我认为引起混乱的行为的原因是margin collapse的有点复杂的过程。一个很好的技巧与OP的原始HTML是添加一个CSS规则像这样：

div { border: 1px solid transparent; }

Poof！现在(没有我的额外的< div>)它工作正常！嗯，除了那个额外的像素从边界。特别是，我认为这是清楚的方式的组合：工作和边缘崩溃规则，导致意外的布局从OP中的代码。

再次编辑 – 对于完整的(和，我认为，完全准确)的故事，见Mark Amery’s excellent answer.细节有一些复杂性，这个答案掩盖了。