2个DIV添加左浮动后margin距离双倍

Question

/*css*/
<style>
    div{ width: 100%;
         margin: 10px;
         height: 100px; 
         float: left;}
</style>

<!--html code-->
<div id="div1"></div>
<div id="div2"></div>
<p>求2个div的垂直距离？</p>

我相信这是一个很基础的问题，但我基础不稳，着了道。

这20px我能否理解为由于2个div使用了float:left,脱离了文档流，所以一般的margin在#div1下外边距与#div2的上外边距取较大值的情况已经不适用，2个div的边距不会重合了。

Answer 1

这是 BFC 的特性，当元素设为浮动或者 overflow 为 hidden 的时候就成了 块级格式作用域，内部布局和外部互不影响，外边距也不合并了。

Answer 2

楼主是IE6下出的问题吧

Answer 3

什么鬼？都left了啊

Answer 4

了解一下bfc