关于float的一些理解

Float是否脱离文档流，一个父元素不设置overflow的话，子元素float，就不会把父元素撑开，换句话说，他就不会有高度，但是做个demo：父元素overflow：hidden； 子元素前两个float，第三个不float，结果是第三个没有clear浮动的元素，跟float的元素出现在同一个位置，前提是这三个元素都是块元素。如果是行内元素的话，浮动元素则会跟行内元素争抢空间。

总结一下：

1.float起初是为了解决文字环绕的问题而产生的。

2.元素float的时候，该元素自己的display会变为block。

3.父元素如果不加overflow：hidden的时候，不会出现在父元素内，或者父元素不被该元素撑开，没有高度。

4.float元素会占据行内元素的空间，会影响周围行内元素的位置。

5.float元素不会占据块级元素的空间，下一个块级元素会当没有浮动元素的出现，而出现在浮动元素的位置；这个现象出现的解决办法就是为clear属性赋值，left，right，或者both。

6.clear会根据值清除不同浮动对该元素影响，left清除左浮动，意思就是float：left的元素会占据文档中块元素的位置，以此类推。

7.浮动在IE7这个喝三鹿牛奶长得浏览器下会出现很多bug，让人匪夷所思，比如一行内左右浮动算两行；多个浮动，倒数第二个又间距；多个浮动阶梯排列等问题。

最后附上一段代码，大家看看：

<div style="overflow:hidden">
<span style="width:100px;background:yellow;">11111</span>
<div style="width:100px;height:100px;float:left;background:red"></div>
<div style="width:100px;height:100px;float:left;background:blue"></div>
<div style="width:100px;height:120px;float:right;background:red"></div>
dsadsadsa
<span style="width:100px;background:yellow;">22222</span>
<div style="width:200px;height:200px;background:green"></div>
<div style="width:100px;height:100px;float:left;background:blue"></div>
</div>效果图片：