一尘不染

边距顶部不起作用:

css

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

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

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


阅读 233

收藏
2020-05-16

共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中代码的意外布局。

2020-05-16