清除浮动

1. 什么是清除浮动（其实，理解为闭合浮动更好~~~）？

　　在 父级元素没有设置高度 的情况下，子级使用了浮动，此时子级将无法撑开父级，由此而产生的问题。

2. 清除浮动问题的方法

　　清除浮动的本质：就是把浮动的盒子圈到里面，让父盒子闭合出口和入口

　　方法一：父级添加 overflow 属性法

　　overflow:hidden | scroll | auto 都可以实现

　　方法二： 额外标签法（这种方法是借助清除浮动对兄弟元素造成的影响的方法，来实现的 ）

　　即：在最后一个子元素的后面加上一个空的div，并给它样式属性 style="clear:both"（虽然是w3c推荐的，但是实际中不推荐使用啊！^_^）　　　　

 　   方法三： :after伪元素清除浮动法（百度、网易、淘宝）

.clearfix:after {
           content:".";    /* 内容为小点，尽量不要为空，否则旧版的浏览器有空格产生 */        display:block;    /* 转换为块级元素 */          height:0;    /* 高度为零 */        visibility:hidden;    /* 隐藏内容，这样就看不见小点了 */ 　　　　　overflow:hidden;        clear:both;    /* 清除浮动 */} .clearfix {
           *zoom:1;            /* 由于IE6和7不能识别after伪元素，所以使用这种兼容性的写法 */         /* 其中的*代表的是IE6和7能识别的特殊符号，带有这个符号的话，就只能有IE6和7能执行 */         /* 其中zoom是IE6和7清除浮动的方法 */ }

 　　方法四： 使用before和after双伪元素清除浮动（强烈推荐，小米、腾讯）???　

/*下面是一个通用的写法，可以同时解决清除浮动问题和margin-top重叠的问题*/.clearfix:after,.clearfix:before{    /* .clearfix:before 可以解决margin-top重叠的问题 */    content:"";　　　    display:table; }.clearfix:after{
       clear:both; }.clearfix{    /*解决非标准浏览器，例如：IE浏览器，的清除浮动问题*/    *zoom:1   }