为什么要清除浮动
虽然说现在 9102 年了应该不会再有人用 float 了，但是有些老网页还是会有 float 来布局的。float 带来的主要问题是高度坍塌。如：
在子元素设置了 float 后，父元素的高度就没了。
.parent {border: 1px solid green;
}.children {float: left;height: 100px;widtH: 100px;border: 1px solid red;
}结果：
主要的原因是因为设置了 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 兼容 */}然后将这个类添加到父元素上就可以了。
这样的副作用基本是没有的，而且只需要在父元素上添加 class 类就好了，更方便。