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{
    content:'';
    clear:both;
    overflow:hidden;
    height:0;
    display:block;
}
.clearfix{
    *zoom:1
}

// 方法2（更好的）
.clearfix:after{
    content:'';
    clear:both;
    display:table;
}
.clearfix{
    *zoom:1
}

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

 

四、float的滥用

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

五、ie7下的浮动问题

1、含clear的浮动元素包裹不正确的问题
2、浮动元素倒数两个元素莫名垂直间距的问题（超过3浮动元素）
3、浮动元素最后一个元素重复的问题
4、浮动元素楼梯排列问题
5、浮动元素与文本元素不在同一行的问题（这个需要注意）
解决方法：左侧元素左浮动，右侧元素右浮动，不要滥用浮动