<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.细节有一些复杂性，这个答案掩盖了。
