清除浮动的方法及原理

1. overflow:hidden/scroll/auto，hidden可以清除浮动但有可能隐藏有用的东西，这个属性定义溢出元素
内容区的内容会如何处理（不推荐）默认值为visible，scroll内容会被修剪，其余内容可见，hidden会被
修剪其余内容不可见，auto若被修剪则其余按滚动条显示若没有也按滚动条显示。inherit继承父元素overflow
的值。
2. style="clear:both;"也可以清除浮动但是会加入空标签（不推荐）
3. .clearfix:before,.clearfix:after{display:table;content:"";}
    .clearfix:after{clear:both;}
    .clearfix{*zoom:1}（兼容ie 触发haslayout）（推荐）
4.父级div也一起浮动
5.父级div定义display:table

清除浮动的原理
    在早期我们通过在div标签中添加了一个空的span标签，并且给这个空的span清除浮动。但是这样的话就
    需要每次都添加一个空的标签，所以一些前辈就想出来用::after::before伪元素来清除浮动，用伪元素
    的好处是你可以用伪元素制造视觉上的效果，但是不会增加JS查DOM的负担，它对JS是透明的你无法用js
    获取到这个伪元素。所以即使你给页面添加了很多伪元素，也不会影响查DOM的效率。通过给大盒子里面
    添加元素清除浮动的话，就会触动BFC，使这个盒子和其他的盒子隔离开，使其父元素的高能够自适应子
    盒子的高。