归档文章 (2011-2017) | 关于CSS清除浮动

date

2011/01/05

关于CSS清除浮动，这是CSS中的经典问题了，方法主要有，使用带clear属性的 BR 标签，在CSS中使用 Clear 属性、Overflow 属性、Display属性…

一、关于清除浮动

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

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

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

二、清除CSS浮动的方法

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


<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属性


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

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

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

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


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

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

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

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

问题多多，不建议使用


.float_box {display:table;}

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

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


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


.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》


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