清除浮动的几种常见方法

Posted 2020-09-10 明镜止水

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

   这个方法的原理与第一种方法类似，是目前比较推荐的用法