清除浮动

清除浮动

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

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

2. 清除浮动问题的方法

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

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

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

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

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

<div class="father">
　　<div class="son1"></div>
　　<div class="son2"></div>
　　<!-- 在浮动的盒子后面加上一个 空盒子 -->
　　<div style="clear:both"></div>
</div>

 　   方法三： :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   
}