先看代码
效果说明
前两个块 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; 脱离于文档布局流来理解。
相关阅读