CSS-清除浮动
1.why?
由于父级盒子很多情况下都不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0；会影响下面标准流的盒子（浮动元素不占有文档流的位置）
2.本质
清除浮动元素脱离标准流所造成的影响。
3.策略
闭合浮动，只让浮动元素在父盒子内部影响；
方法一：额外标签法（隔墙法）
在最后一个浮动的子元素后面再添加一个额外标签，最后在此标签的基础上添加样式clear：both；
缺点：添加无意义的标签，结构化差，代码冗余。所以此方法通常不用！
方法二：给父级元素添加overflow：hidden（子不教，父之过）
优点：代码简洁，方便快捷； 缺点：无法显示溢出的部分，特别是有定位的情况下
方法三：after伪元素法（注：此法为额外标签法的升级版，但不同的是给父元素多添加一个类名：clearfix）
.clearfix:after { content: ' '; display: block; height: 0; clear: both; visibility: hidden; }
还要加上兼容性（IE6,7）写法：.clearfix { *zoom: 1; }
优点：结构简单，没有添加额外标签； 缺点：兼容性； 代表：百度，网易，淘宝
方法四：双伪元素清除浮动（用法同方法三）
.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix: after { clear: both } .clearfix { *zoom: 1; }
优点：较法三更简洁 代表：小米，腾讯
