为什么要清除浮动
虽然说现在 9102 年了应该不会再有人用 float 了，但是有些老网页还是会有 float 来布局的。float 带来的主要问题是高度坍塌。如：
<div class="parent">
<div class="children"></div>
</div>
在子元素设置了 float 后，父元素的高度就没了。
.parent {
border: 1px solid green;
}
.children {
float: left;
height: 100px;
widtH: 100px;
border: 1px solid red;
}
结果：
父元素的高度为0
主要的原因是因为设置了 float 之后，子元素就脱离文档流，也就相当于浮在父元素上了，从二维变到了三维。父元素里面就中空了，高度也为0了，不再是子元素高度。
解决方法一般有两个。
overflow
最简单但是会带有副作用的方法是在父元素上添加一个 overflow:hidden 就可以了。
.parent {
overflow: hidden;
border: 1px solid green;
}
.children {
float: left;
height: 100px;
widtH: 100px;
border: 1px solid red;
}
结果：
父元素高度回来了
但是如果代码多了，每个地方都要加这一句很麻烦，而且有可能父元素 oveflow:hidden 和别的样式冲突就麻烦了。
clearfix
我们可以使用另一个方法，也是推荐的方法。首先定义一个 .clearfix 的类
.clearfix::after{
content: '';
display: block;
clear:both;
}
.clearfix{
zoom: 1; /* IE 兼容 */
}
然后将这个类添加到父元素上就可以了。
<div class="parent clearfix">
<div class="children"></div>
</div>
这样的副作用基本是没有的，而且只需要在父元素上添加 class 类就好了，更方便。
