六种清除浮动方法，强力推荐after清除浮动

标签：

清除浮动的六种方法        

1.给父级也加浮动   float:left

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

<div class="box">  <div class="div"></div> </div>

2.给父级加display:inline-block

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

<div class="box">  <div class="div"></div> </div>

3.在浮动元素下加<div class="clear"></div>   .clear{ height:0px;font-size:0;clear:both;}

<div class="box">    <div class="div"></div>     <div class="clear"></div> </div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

<div class="box">  <div class="div"></div>  <br clear="all"/> </div>

5. 浮动元素的父级（after清除浮动）推荐

{zoom:1;}**在IE6，7下浮动元素 ,haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

 :after{content:""; display:block;clear:both;}其他浏览器清除浮动

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; display:block;clear:both;}

<div class="box clear">  <div class="div"></div> </div>

6.给父级添加overflow:auto;    zoom：1（IE6）

.box{ width:300px;height:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}

.box{ width:300px;height:300px;border:1px solid #000;overflow:hidden; zoom:1;}/*overflow:auto;也行 */

.div1{ width:260px;height:400px;background:Red;float:left;}    

六种清除浮动方法，强力推荐after清除浮动

标签：

原文地址：http://www.cnblogs.com/haifei/p/4412639.html