css清除浮動的五種常用方法

父級div定義固定高度height 結尾處加空div標籤 clear:both 

<style type="text/css"> 
...
/*清除浮動代碼*/ 
.clearfloat{clear:both} 
</style> 
<div class="box"> 
    <div class="float-left">Left</div> 
    <div class="float-right">Right</div> 
    <div class="clearfloat"></div> 
</div> 

父級div定義 僞類:after 和 zoom

<style type="text/css"> 
...
/*清除浮動代碼*/ 
.box:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.box{zoom:1}  /*IE兼容*/
</style> 
<div class="box"> 
    <div class="float-left">Left</div> 
    <div class="float-right">Right</div> 
</div> 

 

父級div定義 overflow:hidden 父級div 也一起浮動