1. 为什么要清除浮动
在编写页面样式的过程中,我们需要用到float属性.如果给子元素设置float属性,而此时没有给父元素设置高度(需要父元素自适应高度).此时就会出现父元素高度发生坍塌,,子元素溢出到父元素外的情况.这样我们就需要清除浮动来达到页面布局不被破坏的效果.
演示
通过这个 codepen案例 你可以直观的感受到,浮动造成的影响.
2. 如何实现清除浮动
2.1 使用clear属性
这一方法的本质,都是利用clear属性,在浮动子元素末尾添加一个带有clear: both属性的元素来闭合父元素.
实现的方法有:
- 在浮动的子元素末尾,新增一个带有
clear: both样式的div标签 - 使用
:after结构伪类选择器在浮动的子元素后增加一个看不见的元素(带有clear: both样式)
2.2 使用overflow属性
给父元素添加overflow:hidden或overflow:auto后,浮动元素又回到了容器层(父元素),把容器(父元素)高度撑起，达到了清理浮动的效果。
这一方法的本质是,触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使得该父元素可以包含浮动元素.
3. 总结
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。
本文参考
