清除浮动主要为了解决父级元素因为子级浮动引起内部高度为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。
网友评论