前端清除浮動的幾種方法

清除浮動方法

• 給父級定義height 缺點:擴展性不好

• 父級 overflow:hidden 定位 浮動 開啟BFC布局 浮動/定位盒子的特點高寬都由內容撐開 缺點:IE6會失效,添加樣式zoom:1;觸發擁有布局(haslayout)

• <br>標簽清除浮動 <br clear="all"/>缺點:IE6不支持

• 空標簽清除浮動 <div style="clear:both"></div> 缺點:違反了結構行為樣式相分離的原則.

• 偽元素清除浮動 clearfix

clearfix:{
    *zoom:1; /*IE6 IE7不支持偽類元素  開啟haslayout*/
}
clearfix::after{
    content:'';
    display:block;
    clear:both;
}