常用的几种清除浮动的方式

为什么要清除浮动？清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。下面介绍四种清除浮动的方式：

1、额外标签法

使用方法：在浮动元素末尾添加一个空标签。

例如：

<div style=”clear:both”></div>
           

优点：简单通俗，容易书写。

缺点：额外增添了多余的代码量。

2、父级元素添加overflow属性

通过触发BFC来清除浮动。

使用方法：给父级元素添加一个overflow属性，其属性值可以是hidden、scroll、auto。

例如：

overflow:hidden;
           

优点：简洁方便。

缺点：

• hidden：会隐藏溢出部分内容。
• scroll：内容溢出时会产生滚动条。
• auto：不管内容有没有溢出都会有滚动条。

3、使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了。

使用方法：

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

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
           

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4、使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
           

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。