浮动即元素脱离了正常的文档流，产生原因一般为盒子中子元素使用了float属性，导致父级盒子不能被撑开。可使用以下方法清除浮动：

1、clear方法

在最后一个浮动元素后，添加一个空标签，空标签class设置为clear: both

.clear{
    clear: both;
}

优点：通俗、方便 缺点：添加无意义标签，徒增代码量

2、父元素添加overflow属性

给浮动元素的容器（父元素）添加overflow: hidden属性

.containerName{
    ...
    voerflow: hidden;
}

优点：代码简洁 缺点：容器中内容过多时会被隐藏，无法显示溢出元素 这里是通过触发BFC的方式来清除浮动。 BFC：表示块级格式化上线文，是指一个独立的块级渲染域，不受外界因素影响的区域。 元素转换为BFC需满足的条件： 1）float不为none； 2）position不为static或relative； 3）display为inline-block、inline-flex、table-cell、table-caption、flex； 4）overflow不为visible。

3、:after方法（推荐）

给浮动元素的容器添加class，并添加伪元素:after

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

优点：闭合浮动 缺点：ie6-7不支持伪元素

4、:before和:after结合使用

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

优点：代码简洁 缺点：zoom: 1会触发hasLayout