清除浮动的几种方法

一、为什么要清楚浮动？

在开发中，父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面标准流的盒子

如果盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
总结：清除浮动的要求，1.父级没有高度，2子盒子浮动了，3影响下面的布局

清除浮动的本质：

清除浮动的本质就是清除浮动元素造成的影响

清除浮动的策略是：

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法

1.额外标签法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

1.额外标签法(隔墙法)

额外标签法会在浮动元素末尾添加一个空标签。例如：

,或者其他标签(如
等)。
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注：需要是块级元素，不能是行内元素

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分

3.:after伪元素清除浮动

:after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
/*为了兼容IE6,7清除浮动的一种写法 */
    *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器 IE6，IE7
网易，百度，淘宝都是使用这种写法

4：双伪元素清除浮动

也是给父元素添加

clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            /*转换为表格*/
        }

        .clearfix:after {
            clear: both;
        }

          .clearfix:after {
            *zoom: 1;
        }

优点：代码更简洁
缺点：需要照顾低版本浏览器
小米，腾讯再使用这种方法清除浮动