清除浮动的四种方法

为什么要浮动？ 让块级元素在一行内显示

但浮动也有不好的时候

脱标会影响别人，即当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)。

子元素设置float属性之前:

子元素设置float属性之后：

由上面两图可以看出当设置float属性之后，父元素的高度为0，这就是所谓的高度塌陷，明显影响了父元素的布局，所以要清除浮动。

清除浮动方法：

• 额外标签发：在浮动元素末尾添加一个空的标签例如：

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

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

• 父级元素添加overflow属性方法：

可以给父级元素添加：overflow为hidden|auto|scroll 都可以实现

优点：代码简洁

缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

• 使用after伪元素清除浮动

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

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

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

优点：代码更简洁

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