float

CSS中浮动的出现已经有很长时间的历史了，但是它的初衷是为了解决和Word中文字环绕效果类似的图文环绕效果，而不是图片一行，文字一行。所以它的特有的行为表现就和这个功能紧密联系在一起。

1.浮动的特性：包裹性（宽高还在）

具有包裹性的其他小伙伴有：

display：inline-block/table-cell/...

position：absolute/fixed/sticky

overflow：hidden/scroll

2.破坏性（ 父元素高度塌陷）

具有破坏性的其他小伙伴有：

display:none

position：absolute/fixed/sticky

3.浮动的元素可以改变display为block，但是本身占有的宽高还存在

4.如何解决浮动带来的影响?

（1）脚底插入clear:both

有两种形式：

第一：html block水平元素底部走起 <div></div>  但是造成元素多余

第二：css after伪元素底部生成 但是IE6/7不兼容

（2）父元素BFC(IE8+)或者haslayout(IE6/IE7)   

BFC:块级上下文

BFC通常声明：

float:left/right

position:absolute/fixed

overflow:hidden/scroll(IE7+)

display:inline-block/table-cell(IE8+)

width/height/zoom:1/...(IE6/7)

但是：无法‘一方通行‘，因为不可能所有元素都是浮动的，定位的

（3）于是一种更好的办法：

.clearfix:after{ content:'';display:table;clear:both;}

.clearfix{ *zoom:1};

5.可以利用浮动的效果可以实现一些功能：

去除多个按钮之间的空格（因为<br/> &nbsp等这些都是字符，因为浮动的按钮，字符被后移）

6.浮动与流体布局（文字环绕衍生）：

单侧固定，另一层自适应

例如：右侧固定，左侧自使用，我们的想法是将HTML元素和布局显示元素相反显示，然后：

width:20px;float:right;

margin-right:30px;

but....there is a new idea,不用改变DOM位置

将自使用的一侧用div包裹起来

div{width:100%;float:left}

margin-right:100px;

width:100px;float:left;margin-left:-100px;

7.智能自使用尺寸:

单侧float

另一侧：display:table-cell(IE8+)  display:inline-block(IE7)

8.兼容性

IE7的各种问题：

含clear的浮动元素包裹不正确的问题

浮动元素倒数2个莫名垂直间距问题

浮动元素最后一个字符重复问题

浮动元素楼梯排列问题

浮动元素和文本不在同一行的问题

9.浮动陷阱多，且用且珍惜。