清除浮动

第一种：W3C提供的方法

在浮动元素的末尾添加一个空的标签，例如：

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

或者其它标签br等也可以。

第二种：给父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。但是在IE6中不支持使用overflow:hidden来清除浮动，所以在IE6中追加 _zoom:1，_zoom:1能触发浏览器的hasLayout机制，zoom前面加_的原因是css hack，css hack简单来说就是针对不同的浏览器设置不同的样式。css hack有三种css属性前缀法、css选择器前缀法、IE条件注释法。需要了解详细请自行搜索。

第三种：使用::after伪元素来清除浮动

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

注意：content:"."里面放一个小点或者其他，尽量不要放置为空，否则在firefox 7.0之前的版本会生成空格。

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

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

 第四种：使用before和after双伪元素来清除浮动

.clearfix::before,.clearfix::after{
    content:"";
    display:"table";      /*这句话触发BFC，BFC可以清除浮动*/
}
.clearfix::after{
    clear:both;
}
.clearfix{
    *zoom:1;              /*由于IE6-7不支持:after，使用zoom:1触发hasLayout机制*/
}