display: flow-root性能开销最小，因其不生成伪元素、不触发重排、不裁剪溢出内容，仅通过原生bfc机制包裹浮动子元素，无额外dom节点与渲染副作用。
display: flow-root 是最直接、副作用最小的方案，它专为创建无干扰的 BFC 而生，现代项目应优先采用。
为什么 display: flow-root 比 overflow: hidden 更可靠
两者都能触发 BFC 并包裹浮动子元素，但 overflow: hidden 会裁剪所有溢出内容——下拉菜单、tooltip、position: absolute 子元素超出父容器的部分全被截断。某些旧版 Safari 中，overflow: hidden 甚至不触发 BFC，需额外加 zoom: 1 或 display: inline-block 兼容。而 display: flow-root 不隐藏内容、不意外触发滚动条、不改变 z-index 层叠顺序，语义也更准确：你不是想“隐藏”，只是想“建立格式化上下文”。
display: flow-root 的兼容性与写法
Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 均原生支持，无需前缀或 polyfill。写法极其简洁：
.container {
display: flow-root;
}
无需额外 class、无需伪元素、不污染 HTML 结构。它和 flex 或 grid 容器共存友好，不会覆盖已有布局逻辑；若父容器本身需要横向滚动（如长表格），display: flow-root 也不会禁用该能力。
伪元素 clearfix 法仍需谨慎使用
当必须兼容 IE11 或更老环境时，.clearfix::after 仍是可行选择，但要注意几个易错点：
- 必须写
content: ""，否则伪元素不生成 - 推荐用
display: table而非display: block，避免 margin 折叠异常 - 不要设
height或line-height，否则可能撑开空白行 -
zoom: 1在现代项目中可省略，IE6/7 已基本退出维护场景
标准写法是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
真正容易被忽略的是浮动问题的“出现时机”
你几乎不会在新项目里主动写 float，但清除浮动的问题常在三种场景突然冒出来：接手老项目时、嵌入第三方组件（如富文本编辑器、图表库）时、处理图文环绕等特殊排版时。这时候选错清除方式，表面看只是父容器塌陷，实际可能引发 tooltip 不显示、键盘焦点丢失、屏幕阅读器无法正确读取内容等隐蔽问题——它们比视觉错位更难定位，也更影响可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
