清除浮动的四种方法

1、清除浮动之额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法

额外标签会在浮动元素末尾添加一个空的标签。例如<div style="clear:both" > </div>，或者其他标签

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

2、清除浮动之父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll

• 优点：代码简洁
• 缺点：无法显示溢出的部分

3、清除浮动之:after伪元素法

:after方式是额外标签法的升级版。也是给父元素添加

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器

4、清除浮动之双伪元素清除浮动

也是给父元素添加

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

•  优点：代码更见解
• 缺点：照顾低版本浏览器