1 
     
      2     
      
这是一段浮动文字
3 
     

 

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

1 
     
      2     
      
这是一段浮动文字
3     
      
4 
     

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

 

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

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

 

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

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

 

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

1 
     
      2     
      
这是一段浮动文字
3 
     

1 .clearfix:after{ 2     content:"."; 3     display:block; 4     height:0; 5     clear:both; 6     visibility:hidden; 7 } 8  9 .clearfix{
       /*兼容IE6、7*/10     zoom:1;11 }

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

 

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

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

1 .clearfix:after,2 .clearfix:before{3      content:" ";4      display:table;5 }6 7 .clearfix:after{8     clear:both;9 }

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