清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
1.为什么要清除浮动
因为很多时候，父盒子不适合给高度。
父盒子没有高度，子盒子又给了浮动的话，父盒子的高度就是0.
因为子盒子的东西并没有装在父盒子里面，都浮起来了。

2.png
两个子盒子的高度就是没有设置高度父盒子的高度，如果两个子盒子都设置了浮动，父盒子的高度变为0.下面紫色盒子也会跑上来 3.png
解决方法：
1.父级添加overflow属性方法
父盒子属性加上 overflow：hidden；
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。