CSS清除浮动的几种方法（有实例）

首先我们要说一下浮动带给我们的问题：如果父元素没有设定固定高度那么当子元素设置浮动时父元素不会被撑开，很明显这会影响我们的布局

效果如下：

1、第一种方法：after伪元素（推荐使用）

给浮动元素的父元素添加类名clearfix并设置clearfix的css

 

/*第一种方法：after伪元素 推荐使用这种方法*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
    visibility: hidden;
    line-height:0;
    font-size:0;
}
.clearfix{
    zoom:1;//兼容ie6
}
.box{
    width:500px;
    border:1px solid green;
    margin:100px auto;
}
.floatBox{
    width:200px;
    height:200px;
    float:left;
    background:#fec9c9;
}

<div class="box clearfix">
    <div class="floatBox">1</div>
</div>

效果如下：证明清除浮动成功

 

2、第二种方法：br标签清除浮动，设置空标签方法与这个类似，就是把br标签换成一个div类名为clear然后clear:both

 

/*第二种方法：br标签清除浮动，设置空标签方法与这个类似，就是把br标签换成一个div类名为clear然后clear:both*/
.box1{
    width:500px;
    border:1px solid green;
    margin:100px auto;
}
.floatBox1{
    width:200px;
    height:200px;
    float:left;
    background:#009f95;
}
.clear{
    clear:both;
}

<div class="box1">
    <div class="floatBox1">2</div>
    <br class="clear">
</div>

3、下面几种方法可以总结在一起是对浮动元素的父元素进行设置overflow:hidden/auto或者diaplay:table

 

 

/*第三种方法，父元素设置overflow:hidden*/
.box2{
    width:500px;
    border:1px solid green;
    margin:100px auto;
    overflow:hidden;
}
.floatBox2{
    width:200px;
    height:200px;
    float:left;
    background:#6dcfb8;
}
/*第四种方法：父元素设置overflow:auto;*/
.box3{
    width:500px;
    border:1px solid green;
    margin:100px auto;
    overflow:auto;
}
.floatBox3{
    width:200px;
    height:200px;
    float:left;
    background:#f2947a;
}
/*第五种方法：父元素设置display:table*/
.box4{
    width:500px;
    border:1px solid green;
    margin:100px auto;
    display:table;
}
.floatBox4{
    width:200px;
    height:200px;
    float:left;
    background:#ff00ff;
}

<div class="box2">
    <div class="floatBox2">3</div>
</div>
<div class="box3">
    <div class="floatBox3">4</div>
</div>
<div class="box4">
    <div class="floatBox4">5</div>
</div>

当然推荐的还是第一种方法用after伪元素，因为其他的方法大多有要放弃的缺点