请 float 一浮“浮到底”，否则影响 margin-top

作者：vkvi 来源：ITPOW（原创）日期：2013-5-13

先看代码

<div style="float:left; width:50%; height:200px; background:#f00;"></div>
<div style="float:left; width:50%; height:200px; background:#0f0;"></div>
<div style="clear:both; margin-top:50px; border-top:1px solid #000; width:100%; height:200px; background:#00f;"></div>

效果说明

前两个块 div 通过浮动占了一行（各占 50%），但第三个块 div 没有 float:left; 我们使用了 margin-top:50px; 并没有效果，我们发现 border-top 位置也是对的，怎么回事呢？

通过测试，我们发现 margin-top 是从第一个没有 float 的 div 那里开始算的，这里没有 float 的第一个 div 就是第三个 div，由于它是第一个没有浮动的，那么他的 margin-top 就是从最外层开始算，也就是说 margin-top 要达到前两个块的高度（200px）才有效，如果我们要让第三个 div 与前两个 div 间隔 50px，就需要设置 margin-top:250px;。

这样真烦，有没有解决方法？

有，让第三个 div 也 float:left;，然后设置 margin-top:50px; 就有 50px 的效果了。

为什么会这样？

把 float:left; 脱离于文档布局流来理解。