本文详细介绍了清除浮动影响的四种常见方法：1) 使用`overflow:hidden`创建BFC；2) 设置`clear:both`属性；3) 利用`:after`伪元素结合`clear:both`；4) 在两个父盒子间插入清浮动元素。每种方法的优缺点及实现原理进行了阐述，帮助开发者更好地理解和应用这些技巧。
- 清除浮动：浮动一定要封闭到一个盒子中，否则就会对后续页面产生影响。
清除浮动的方法
方法一
让内部有浮动的父盒子形成 BFC，它就能关闭内部的浮动。此时最好的方法就是 overflow: hidden 属性。如下图所示↓
方法二
给后面的父盒子设置 clear: both 属性。clear 表示清除浮动对自己的影响，both 表示左右浮动都清除。如下图所示↓
缺点：会使前一个 div 盒子的 margin 属性失效
方法三
使用 ::after 伪元素给盒子添加最后一个子元素，并且给 ::after 设置 clear: both 。如下图所示↓
注意：
- 伪元素要通过
display: block转换为块级元素 - 常用类名：
class="clearfix"
方法四
在两个父盒子之间“隔墙”，隔一个携带 clear: both 的盒子。如下图所示↓
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
