css清除浮动的几种方法

当对某个标签使用浮动的时候，该块内容就会脱离文档流，其父元素便不再包裹该标签内容，父元素的高度会变成0，出现高度塌陷的问题。这个时候就要清楚浮动。

今天就来介绍一下css清除浮动的几种方法。

1. 在文档最后面新加一个空的div,如下

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

但是如果使用这种方法，添加了无意义的标签，违背了结构和表现分离的web结构精髓。后期难以维护。

2. 给浮动的元素添加overflow:auto/hidden

当给浮动的元素添加overflow:auto/hidden时，浮动的元素又会回到文档流，将容器撑起来。

3.让父元素也浮动

如果说父元素也需要清楚浮动，那就要让父元素的父元素也要浮动…..那整个页面都建立在浮动的基础上。

4.添加一个.clearfix,使用伪元素

.clearfix:after,
.clearfix:before{
content:"";
display: table;//防止当前盒子的margin-bottem与下一个盒子的margin-top叠加
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;//为ie6,ie7的兼容性设置
}