CSS-清除浮动（闭合浮动）

一、为什么要清除浮动

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了

二、清除浮动的方法

1、额外标签法

在浮动元素末尾添加一个空标签，例如： <div style="clear: both;"></div>，或者其他标签，如<br/>等，添加盒子要求必须是块级元素

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

2、父级元素添加overflow：hidden、auto、scroll

优点：代码简洁

缺点：无法显示溢出部分

3、给父级添加：after伪元素

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

优点：没有增加额外标签，结构更简单

缺点：需要照顾低版本浏览器

4、给父级元素添加双伪元素清除浮动

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

优点：代码更简洁

缺点：照顾低版本浏览器