应优先使用 display: flow-root 清除浮动，它无副作用且等效于 BFC；兼容 IE 时用 clearfix 伪元素方案；overflow:hidden 仅限调试，会裁剪溢出内容。
overflow:hidden 清除浮动的原理和限制
它不是真正“清除”浮动，而是触发父容器的 BFC（块级格式化上下文），让父容器重新计算高度，包含内部浮动元素。但副作用明显：overflow:hidden 会裁剪溢出内容、隐藏下拉菜单、遮挡阴影或定位元素。
- 当子元素使用
position: absolute或transform向外偏移时，可能被意外截断 - 不适用于需要滚动、悬停展开、或动画溢出的场景
- 在 Flex/Grid 容器中设置
overflow:hidden不会触发 BFC，失效 - 某些旧版 Safari 对
overflow:hidden+zoom:1组合有渲染 bug
clearfix 的标准实现与现代写法
通过伪元素插入并清除浮动，不干扰布局流，也不影响溢出行为。最常用的是 micro clearfix：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
现代更推荐用 ::after 单伪元素 + display: block，避免 table 布局语义干扰：
.clearfix::after {
content: "";
display: block;
clear: both;
}
- 必须给父容器添加
class="clearfix"，不能靠继承自动生效 - 如果父容器本身是
display: flex或display: grid，clear无效，此时无需 clearfix - 不要对已用
display: flow-root的容器重复加 clearfix，冗余且可能干扰
flow-root 是更干净的替代方案
display: flow-root 是 CSS 标准中专为创建无副作用 BFC 而设的值，效果等同于 clearfix，但无需额外 class 或伪元素：
.container {
display: flow-root;
}
- 完全替代
overflow:hidden和clearfix在清浮动场景中的角色 - 兼容性已很好：Chrome 58+、Firefox 53+、Safari 10.1+、Edge 16+
- 不会隐藏溢出，不干扰
position: absolute子元素定位 - 注意：IE 完全不支持，如需兼容 IE，仍得回退到 clearfix
什么时候该选哪一种？
优先级很明确：能用 flow-root 就不用其他；要兼容 IE 才考虑 clearfix；仅临时调试或确定无溢出风险时才用 overflow:hidden。
- 新项目、管理后台、移动端页面 → 直接上
display: flow-root - 老项目需支持 IE11 → 用 micro clearfix，并统一封装成 SCSS mixin 或 utility class
- 写 demo 快速验证浮动是否被包住 →
overflow:hidden可以，但别提交到生产代码 - 父容器已有
overflow:auto且恰好需要滚动 → 别再叠加clearfix，它没意义
最容易被忽略的一点：很多开发者以为加了 clear:both 就万事大吉，其实它只对紧跟其前的浮动兄弟元素生效，对父容器高度塌陷毫无作用——清浮动的本质从来不是“清”，而是“建立新的包含上下文”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
