清除浮动的几种常见方法

Posted 明镜止水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动的几种常见方法相关的知识,希望对你有一定的参考价值。

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 }

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

以上是关于清除浮动的几种常见方法的主要内容,如果未能解决你的问题,请参考以下文章

清除浮动的几种方法

“清除浮动”的几种方法

清除浮动的几种方式

清除浮动的几种方法

清除浮动的几种方法

清除浮动的几种方法