清除浮动的几种常见方法

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 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发生重叠

转载于:https://www.cnblogs.com/NickyLi/p/6708306.html