CSS清除浮动方法

HTML结构

<div class="wrap">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

CSS样式

.wrap{margin:10px;padding20px;border:5px solid gray;background-color:#fff;}
.div1{float:left;height:100px;width:100px;background-color:lightgray;}
.div2{float:left;height:100px;width:100px;background-color:skyblue;}
.div3{float:left;height:100px;width:100px;background-color:red;}

 可以看到外层wrap div的高度并没有撑起来，这是因为内层元素浮动脱离了文本流而导致的，这时我们就需要清除浮动。下面介绍清除浮动的三种常用方法。

1.在最后一个内层元素后面添加空元素,使用clear:both

<div class="wrap">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

.clear{clear:both;}

 

2.给外层元素添加overflow:hidden或者auto属性。

.wrap{
    overflow:auto;
    zoom:1;/*处理兼容性问题*/
}

 

 

3.给外层元素添加伪元素after，利用after模拟创建元素div.clear。（推荐使用，可以作为公共样式）

<div class="wrap clearfix">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

.clearfix{
    zoom:1;/*处理ie兼容问题*/
}
.clearfix:after{
    display:block;
    visibility:hidden;
    content:'.';
    clear:both;
    height:0;
    overflow:hidden;
}