css 清除浮动

清除浮动

让浮动的子元素撑开父级元素的高度

 

方案1

　　给父元素设置高度。（缺点：父元素高度无法自适应）

方案2

　　给父级元素开启BFC。浮动盒子的特点和定位盒子的特点：高宽都由内容撑开（缺点：ie6，ie7没有BFC，不起作用）

　　overflow:hidden

　　定位

　　浮动

方案3

　　br标签的clear属性清浮动（缺点：ie6不起作用，违反了结构 行为 样式相分离的原则）

<br clear="all">

方案4

　　空标签清浮动（注意，上面使用的是标签的属性，这里使用的是css样式，性质不同）（ie6.ie7 空标签div会存在最小高度问题，违反了结构 行为 样式相分离的原则）

<div style="clear:both"></div>

方案5 

　　父元素 开启haslayout + 设置伪元素 清除浮动（主流）

/* 开启haslayout */
.fatherClass {
    *zoom: 1;
}
/* ie6,7不支持伪元素 */
.fatherClass:after {
    content: '';
    display: block;
    clear: both;
}