清除浮动的几种方法

1.额外标签法：

　　　　.clear{
　　　　　　clear:both;
　　　　　}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
　　　　　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
　　　　　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差，一般不使用。

2.父元素添加overflow属性来清除浮动

　　overflow:hidden;

　　先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
　　注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）。
优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）。
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3. 使用after伪元素清除浮动：(常用)
：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）

.clearfloat:after{
    display: block;        //将文本转为块级元素
    clear: both;    //清除浮动
    content: "";    //设置内容为空
    visibility: hidden;    //将元素隐藏
    height: 0;
}
.clearfloat{
    zoom:1;    //    为了兼容IE
}

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。
4.使用双伪元素清除浮动：

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