CSS清除浮动的四种方法

一、为什么要清除浮动

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

清除浮动的本质是清除浮动元素造成的影响
****如果父盒子本身有高度，则不需要清除浮动
****清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

二、清除浮动的四种方法

1、父盒子添加overflow:hidden、auto或scroll

2、额外标签法：在浮动元素末尾添加一个空标签(必须是块级元素)，例如 <div style=”clear:both”></div>，然后设置.clear样式为clear: both(清除两侧浮动)；或者clear: left(清除左侧浮动)；或者clear: both:right(清除右侧浮动)；一般使用clear: both。

3、:after伪元素法：是额外标签法的升级版，给父元素添加class="clearfix",然后设置属性

.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专用 */
            *zoom: 1;
        }

4、双伪元素清除浮动：也是给父元素添加class="clearfix",然后设置属性

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