首页 > 代码库 > css清除浮动的五种常用方法

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

  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清除浮动的五种常用方法