清除浮动的方法

为什么要清除浮动：在父盒子内部的元素具备浮动属性时，内部元素脱离文档流，内部元素无法再撑开父盒子，导致父盒子高度塌陷。

1.添加额外空标签：在浮动的子元素后面添加一个块级标签，并且设置其clear为both,这个方法的原理是：

设置这个额外的空盒子左右不允许浮动元素，所以他会跑到浮动元素的下面，当然在浮动元素全部为float:left时该盒子可以设置为clear:left,浮动元素全部为float:right时该盒子可以设置为clear:right.为了保险和方便起见还是clear:both比较好,

注意不要设置其高度，否则他会撑开父盒子导致父盒子高度变大。

2.使用after伪元素，对父级元素添加类名，并设置其after伪元素

.clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        .clearfix{
            *zoom:1;　　/*兼容ie6.ie7*/
        }

原理和额外标签类似。

3.双伪元素法，对父级元素添加类名，并设置其after伪元素

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

原理和额外标签类似。

4.overflow方法：给父级元素添加overflow：hidden、auto或者scroll

这种方法可能会出现滚动条

5.给父级元素设置高度：简单暴力但是实用性不强，高度固定适用范围不大