1、给下一个元素加clear:both；
缺点：导致下一个元素，margin失效。
2、给空元素加clear:both；
缺点：增加无意义标签，后期维护不利。
3、给父级加高度；
缺点：只能用在固定高度的情况下，动态的用不了。
4、父级div定义overflow:hidden；
缺点：用position:absolute,超过父级就被隐藏了。
5、父级div定义伪类:after和zoom；
代码多，但是最好用，推荐。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
6、浮动元素下方加空标签；
原理有两个：
1.空标签、伪类after、clear both：块级元素可以让行内元素下沉。
2.设置verflow或display:table ；就是触发了BFC(块级格式化上下文)
什么是BFC，可以理解为盒模型，内部元素在布局上不会影响外部元素，就是普通文档里。
我们可以通过一下方法变成BFC普通文档流：
- float除了none以外的值
- overflow除了visible之外的值
- display(table-cell table-caption,inline-block)
- position(absolute,fixed)
