导航
导航
文章目录
  1. 一、关于清除浮动
  2. 二、清除CSS浮动的方法
    1. 方法一:带clear属性的br标签
    2. 方法二:在CSS中使用clear属性
    3. 方法三:在CSS中使用overflow属性
    4. 方法四:在CSS中使用display属性
    5. 方法五:在CSS中使用伪类:after

关于CSS清除浮动

关于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;
}
支持一下
扫一扫,支持一下