float探索，脱离文档流？不脱离文档流？

float属性是css2中的一个属性，很多时候我们都会用到她，但是通常只要一不小心就会遇到很多问题，跟设想的完全不一样呀，怎么回事？？？那么这个时候我们应该冷静下来好好探索一下这个属性的用法，弄明白其原理，适用于什么场景，这样在任何情况下都能正确的使用她。

最初，float是应用于图像，使文字环绕在其周围，使用float的元素会自动生成bense块级框，而不管其本身是什么元素。

下图中img浮动，p元素并没有完全顶上去，而是环绕在图片的周围，也就是说p上的一部分文字空间仍然被img占据着；但块级元素div顶了上去。综上说明float的元素脱离正常的文档流，但是还会占据文档流的文本空间。

可以看出float脱离文档流不是完全脱离。

 

需要注意的地方：

float会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素。