边距顶部不起作用：

Question

Left

<div style="float: right;">Right</div>

<div style="clear: both; margin-top: 200px;">Main Data</div>

为什么margin:top“主数据”在上面的代码中不起作用？

Answer 1

您可以将两个浮动div放入 另一个 设置为“溢出：隐藏”的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年历史的答案添加一点点：我认为造成混乱的原因是_利润率下降的_
过程有些复杂。使用OP中原始HTML的一个好技巧是添加一个CSS规则，如下所示：

div { border: 1px solid transparent; }

of！现在（没有我的额外要求<div>）可以正常工作！好吧，除了边界上的多余像素。特别是，我 认为 这是clear: both工作方式与边距折叠规则的结合，这些规则导致OP中代码的意外布局。