清除浮动的几种常见方法

<div class="container">
    <p style="float:left">这是一段浮动文字</p>
</div>

 

1.在container父容器末尾加上一个清除浮动的div标签

<div class="container">
    <p style="float:left">这是一段浮动文字</p>
    <div style="clear:both"></div>
</div>

   这种方法的缺点是在html结构中增加了许多无意义的标签

 

2.给父容器也添加float:left

   这种方法不推荐使用，因为一旦html结构层次比较多时，就要不断在每个父容器上添加浮动属性，影响整个页面的布局

 

3.在父容器上添加overflow属性

   添加overflow:auto或者overflow:hidden都可以，添加overflow属性后浮动元素就会重新回到父容器中

 

4.在父元素添加.clearfix:after（推荐）

<div class="container clearfix">
    <p style="float:left">这是一段浮动文字</p>
</div>

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{    /*兼容IE6、7*/
    zoom:1;
}

   这个方法的原理与第一种方法类似，实际上.clearfix中除了clear:both是起到清除浮动作用，其他属性的主要功能是为了隐藏元素，这是目前比较推荐的用法

 

5.基于第四种方法的改良

   第五种方法是对第四中方法的改写，写法更加优雅

.clearfix:after,
.clearfix:before{
     content:" ";
     display:table;
}

.clearfix:after{
    clear:both;
}

    加上.clearfix:before是为了防止元素之间的margin-top和margin-bottom发生重叠