关于CSS清除浮动

一、关于清除浮动

图一，单方向设置元素浮动，则元素将会按顺序紧挨相邻元素。另外为防止浮动错位，建议为浮动元素的容器设置宽度值。

清除浮动目的：1）解决页面错位问题、2）解决子级元素浮动，导致父级元素背景无法自适应子级元素高度。

图二，没有清除浮动时效果图

二、清除CSS浮动的方法

方法一：带clear属性的br标签

        
        
        
        
        html
    
<div class="float_box">
	<div class="float_left">左浮动元素</div>
	<div class="float_right">右浮动元素</div>
	<br clear="all" />　//正确的位置
</div>
<br clear="all" />　//错误的位置
<div class="no_float">看看我的位置</div>

图三，错误的位置仅仅能清除左右浮动特性，无法解决子级元素浮动，导致父级元素背景无法自适应子级元素高度。

图四，将带清除浮动的属性的 br 标签，放置在浮动元素之后，问题已解决（IE7除外）

图五，IE7依然未能解决背景高度问题

方法：除正确添加 br 标签外，再添加CSS属性，float_box｛zoom:1;｝（注意：仅添加zoom，只能兼容IE7）

方法二：在CSS中使用clear属性

        
        css
    
.no_float {clear:both;}
.float_box {zoom:1} //用于兼容IE7

用法：在需要清除浮动的元素中添加clear属性，效果如图三

缺点：不能能达到图四效果，因为不能做到紧跟浮动元素之后。（IE7无此缺点，因为添加了zoom）

方法三：在CSS中使用overflow属性

        
        css
    
.float_box {
overflow:hidden;
zoom:1; //要兼容IE6，添加此项
}

用法：在浮动元素所在容器元素中，添加overflow属性，效果如图三。

缺点：会将溢出部分隐藏（注：低版本Firefox可能无法解决背景高度问题）

方法四：在CSS中使用display属性

问题多多，不建议使用

        
        css
    
.float_box {display:table;}

方法五：在CSS中使用伪类:after

通过增加一个高度为零的伪类层，达到不用添加多余 br 标签目的。

        
        css
    
.float_box {zoom:1;}  //解决IE7无法使用伪类
.float_box:after{clear:both;visibility:hidden;display:block;height:0;line-height:0;content:"";}

        
        css
    
.float_box {zoom:1;}  //解决IE7无法使用伪类
.float_box:after{clear:both;visibility:hidden;display:block;height:0;line-height:0;content:"";}

一个更简单的方法：《A new micro clearfix hack》

        
        
        
        
        css
    
.float_box:after{
	content:"";
	display:table;
	clear:both;
}
.float_box{
	zoom:1;
}

目录