方式一：父级元素伪类after
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
原理：相当于在.clearfix元素内部最后面加了一个子元素，并且清除左右的浮动(同方式二)。
方式二：空div
在要清除浮动的元素后面加一个空的div标签，并给这个元素清除浮动clear:both;
缺点：会增加空标签。
方式三：父级元素overflow:hidden
给父元素添加overflow:hidden;
缺点：会隐藏溢出的元素。
方式四:父级元素overflow: auto;zoom:1;
.clearfix {
overflow: auto;
zoom:1;
}
缺点：当子元素宽高超过父级时会出现滚动条
