css清除浮动的五种常用方法

标签：display   清除浮动   lock   block   css   定义   伪类   log   box   

1. 父级div定义固定高度height
2. 结尾处加空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> 

3. 父级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> 

    

4. 父级div定义 overflow:hidden
5. 父级div 也一起浮动 

css清除浮动的五种常用方法

标签：display   清除浮动   lock   block   css   定义   伪类   log   box   

原文地址：http://www.cnblogs.com/fangdong/p/6852984.html