display: flow-root 是现代项目清除浮动的最优解，它专为创建无副作用bfc设计，能自然包裹浮动子元素，不裁剪内容、不触发滚动条、兼容chrome 64+/firefox 58+/safari 15.4+/edge 79+。
直接用 display: flow-root 就行，这是现代项目里最干净、副作用最小的解法。其他方法要么破坏溢出行为，要么引入兼容性负担，要么污染 DOM。
为什么 overflow:hidden 不该是默认选项
overflow: hidden 确实能触发 BFC 并包裹浮动子元素，但它会裁剪所有超出父容器的内容——下拉菜单、tooltip、绝对定位弹层、甚至横向滚动的表格，都可能被无声截断。更隐蔽的问题是：它在 Safari 旧版本中不一定触发 BFC，还得加 zoom: 1 补丁；某些动画或 modal 场景下还会意外改变层叠上下文，导致 z-index 失效。
- 如果父容器本身需要横向滚动（比如
overflow-x: auto），overflow: hidden会直接禁用该能力 - 搜索引擎可能无法索引被裁剪掉的内容，影响 SEO
- 它语义错位：你本意是“建立 BFC”，不是“隐藏溢出”
clearfix 伪元素法的实际坑点
主流框架还在用的 .clearfix::after 方案，看似稳妥，但漏掉一个细节就失效。最常见错误是忘记写 content: "" ——没有这行，伪元素根本不会渲染，清浮动就白写了。
- 推荐用
display: table而非display: block，避免部分浏览器下 margin 折叠异常 - 别给
::after加height或line-height，否则会撑开额外空白 - IE6/7 需要
*zoom: 1触发 hasLayout，现代项目可安全省略 - 标准写法是：
.clearfix::after { content:""; display: table; clear: both; }
display: flow-root 是什么，为什么现在能放心用
display: flow-root 是 CSS Display Module Level 3 明确定义的值，专为创建无副作用 BFC 设计。它和 overflow: hidden 效果一致（能包裹浮动子元素、防止父容器塌陷），但不裁剪内容、不触发滚动条、不干扰定位逻辑、也不改变 z-index 层级。
- 支持 Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+，覆盖所有现代浏览器
- 无需额外 class，直接写在父容器上：
.container { display: flow-root; } - 与
flex或grid并存友好，不会覆盖已有布局声明 - 真正容易被忽略的是：浮动本身虽已退居二线，但老项目维护、第三方组件嵌入、图文环绕等场景仍会突然冒出——这时候选错清除方式，错位只是表象，背后可能是 tooltip 消失、键盘焦点丢失、屏幕阅读器读取异常等更难调试的问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
