清除浮动的方法

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

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.给父级元素设置高度：简单暴力可是实用性不强，高度固定适用范围不大