CSS 清除浮动

为什么需要清除浮动

在一般情况下，一个盒子里使用了 CSS float 属性，导致父级盒子不能被撑开;

效果图：

本来两个绿色对象盒子是在黑色盒子内，因为对两个绿色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致黑色盒子不能撑开；
副作用：由于父级盒子不能被撑开，导致父级盒子CSS背景不能显示，边框不能随内容撑开，margin、padding设置值而不能正确显示；

清除浮动的几种常见的作法

1. clear: both;清除浮动：
   在父级元素结束标签前加一个空的div元素，给空元素设置clear: both;

效果图:

缺点：添加了不必要的空元素；
2. overflow: hidden;(BFC布局) 清除浮动:
给父级元素设置overflow:hidden;

效果图:

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素;
3. ::after伪元素清除浮动:

效果图:

缺点：ie6-7不支持伪元素::after，使用zoom:1触发hasLayout;