清除浮动方法总结

　　大家都知道，如果元素不清除浮动，那么包裹他的父元素会塌陷，那么就必须清除浮动，一下便是我在网上看见的一些常用的清除浮动的方法。

　　

一  在浮动元素后面加一个div或者br，添加clear：both

　　.clear{clear:both;height:0;overflow:hidden;}

　　不过会增加html元素，改变文档结构（不推荐）

二   在浮动元素父元素上面加

 

 1

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

*html .clearfix{height:1%;}*+html .clearfix{height:1%;}

.clearfix{display:inline-block;}.clearfix {display:block;}

2 

.clear{clear:both;height:0px;overflow:hidden;}

3

 .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{*+height:1%;}

4 

.clearfix{overflow:auto;_height:1%}

 5

.clearfix{overflow:hidden;_zoom:1;}

注意：overflow属性值只能选择auto或hidden

 6

.clearfix:before,  .clearfix:after {     content: ".";     display: block;     height: 0;     visibility: hidden;  } 

 .clearfix:after {clear: both;}  

.clearfix {zoom: 1;} /* IE < 8 */

 

7 

.clearfix:before,   .clearfix:after {      content:"";      display:table;   }   

.clearfix:after {     clear:both;     overflow:hidden;   }  

.clearfix {     zoom:1; /* IE < 8 */  }

 

参考：

http://www.w3cplus.com/css/css-containing-floats-part-2

http://www.w3cplus.com/css/css-containing-floats

http://www.w3cplus.com/css/clear-float

 

http://www.daqianduan.com/3606.html