用after伪类实现，兼容多种浏览器：
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;overflow:hidden;}
为了兼容IE6、IE7，加上下面代码：
.clearfix{zoom:1}
一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了。
使用after伪类，配合IE的zoom或者overflow清除浮动
原文：https://www.cnblogs.com/Gbeniot/p/10147504.html