float

一、float设置的初衷

　　为了实现文字环绕效果

二、float特性——包裹与破坏

　　包裹的行为与表现：收缩、坚挺、隔绝

　　具有包裹性的元素：float，display：inline-block/table-cell，position：absolute/fixed/sticky，overflow：scroll/hidden

　　破坏的行为：父元素高度塌陷

　　具有包裹性的元素：display：none，position：absolute/fixed/sticky

三、清除浮动

　　两大基本方法：1、底部插入clear：both      2、父元素BFC(IE8+)或haslayout(ie6,ie7)

方法1：

.clearfix:after{

　　display:block;

　　height:0;

　　clear:both;

　　overflow:hidden;

　　content:'';　

}

.clearfix{

　　*zoom:1;

}

 

方法2（更好的方法）：

.clearfix:after{

　　display:table;

　　clear:both;

　　content:'';　

}

.clearfix{

　　*zoom:1;

}

注：.clearfix应该放在浮动元素的父元素上

四、float的滥用

　　float的两大效果：1、使元素block化   2、去空格化

五、ie7下的浮动问题

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

　　2、浮动元素倒数两个元素莫名垂直间距的问题（超过3浮动元素）

　　3、浮动元素最后一个元素重复的问题

　　4、浮动元素楼梯排列问题

　　5、浮动元素与文本元素不在同一行的问题（这个需要注意）

解决方法：左侧元素左浮动，右侧元素右浮动，不要滥用浮动