display: flow-root是最优解，它专为创建无副作用bfc设计，语义清晰、不裁剪溢出内容、一行生效；overflow:hidden虽能触发bfc但会强制裁剪下拉菜单等溢出元素，属有副作用的权宜之计。
清除浮动和BFC不是同一回事，但BFC是解决浮动导致高度塌陷最直接、副作用最小的机制——它不“清除”浮动，而是让父容器重新把浮动子元素算进自身高度里。
为什么 overflow: hidden 能“清除”浮动？
这不是CSS在执行“清除”动作，而是overflow: hidden触发了BFC，使父容器进入一个独立渲染区域。在这个区域内，浏览器必须把所有子元素（包括float元素）纳入高度计算，于是父容器不再塌陷。
- 常见错误：以为
overflow: hidden是专门用来清浮动的“魔法属性”，其实它只是众多BFC触发条件之一 - 副作用注意：
overflow: hidden会裁剪溢出内容，比如弹出菜单、下拉框可能被截断 - 替代方案：
display: flow-root语义清晰、无裁剪风险，是现代推荐写法
display: flow-root 和 clearfix 哪个更可靠？
display: flow-root是W3C明确为创建BFC设计的display值；而clearfix是用伪元素::after插入clear: both来视觉上“撑开”父容器，属于hack手段。
-
flow-root天然支持BFC全部特性（含外边距不折叠、防浮动覆盖），且不影响溢出行为 -
clearfix依赖伪元素+clear，对flex/grid子项无效，且无法阻止父容器内相邻块级元素的margin折叠 - 兼容性：Chrome 64+/Firefox 59+/Safari 15.4+ 支持
flow-root；老项目需考虑IE，但IE本身不支持该值
BFC触发条件中哪些实际可用、哪些要避开？
不是所有BFC触发方式都适合用于“解决浮动塌陷”，得看是否引入额外布局干扰。
- 推荐：
display: flow-root（语义正确、零副作用）、overflow: auto（比hidden更宽容，但仍有滚动风险） - 慎用：
float: left或position: absolute——它们本身就会脱离文档流，导致父容器布局逻辑彻底改变 - 避免：
display: inline-block或table-cell——会改变盒模型类型，影响宽度计算和对齐行为
BFC不是清浮动的“开关”，而是换了一套渲染规则。真正容易被忽略的是：一旦用了BFC，它同时会影响外边距折叠、浮动避让、内容隔离——这些不是附加效果，而是同一机制的自然结果。别只盯着高度撑开了没，得通盘看它对周围元素的连锁反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
