浮动理解

在理解浮动的概念，边看边动手做一下：

未设置浮动的div

给div4设置 float:left 

给div4设置 display:none 

为什么？

div4在使用float属性之后不是直接水平移动到最左端，而是先向下移动了一个margin的距离，然后才向左移动。

目前没有找到合理的解释。

去掉div5的margin

可以看出div4的位置受div5的margin影响，但具体原理还是很模糊，在w3c上找到这样一段话:

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

这里所说的包含框是不是指整个框模型，即包括内外边距和边框在内的整个元素框？可不可以理解为标准流中的元素框与浮动框的外边距在相遇时不会合并？下面是w3c关于外边距合并的解释：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

那其他定位中元素框与标准流的元素框的外边距会合并吗？

div4 position:absolute / fixed

尝试了一下，发现得到的结果和float:left相同。

---

之前看的头昏脑涨的，就暂时搁置了一段时间。重新捡起来看，又查了查W3C上的解说，发现关于外边距合并的内容最下面有如下注释：

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

嗯，大概就是这个意思吧。自己测试了一下，只有普通文档流的块框之间的垂直外边距才会发生合并，其他行框、浮动框以及绝对定位中的框模型不会出现外边距合并，因而出现上述现象；

也就是说，当元素设置为浮动后虽然会脱离普通文档流，但这是单方面的。只是普通文档流中的其他元素对浮动元素单方面的忽略，普通文档流中的元素将其视为不存在，可以通过为浮动元素设置opacity:0 和 display:none 验证一下，会发现浮动元素的存在与否对普通文档流中元素的布局完全没有影响；而另一方面，浮动元素却对普通文档流中的元素“恋恋不舍”，它虽然也想上天，但更多的只是一种趋势，只要接触到其他框模型的边缘就会停下；浮动元素有的时候反而会因此而下沉，就像上文中原本的外边距合并现象因为元素浮动而失效，导致浮动元素向下沉了一段margin的距离。

---

参考资料和拓展：

W3School - CSS 外边距合并

张鑫旭 - CSS float浮动的深入研究、详解及拓展