display: flow-root 是专为创建无副作用 BFC 设计的 display 值，能正确包裹浮动子元素高度且不裁剪阴影、不隐藏绝对定位元素、不触发滚动条；现代浏览器支持率超97.5%，IE全系及Edge≤16不支持，需用 @supports 回退到 clearfix。
display: flow-root 是当前最直接的替代方案
它不是“加强版 overflow”，而是专为创建无副作用 BFC 设计的 display 值。加在浮动容器上，父元素就能正确包裹子元素高度，且不裁剪 box-shadow、不隐藏 position: absolute 提示框、不触发滚动条。
常见错误是把它当 fallback 写在 overflow: hidden 后面：display: flow-root; overflow: hidden;——后者会立即覆盖前者并生效，白写了。
- 必须单独使用，不能和
float、position: absolute、contain: layout共存，否则降级为display: block - 现代浏览器支持率已超 97.5%，但 IE 全系、Edge ≤ 16 完全不识别
- 若项目需兼容 IE11，得用
@supports (display: flow-root) {}包裹，并在@else块里回退到.clearfix::after
为什么 overflow: hidden 不算“淘汰”而是“该禁用”
它能清浮动，只是因为触发了 BFC，但副作用太强：任何超出边界的视觉内容都会被裁掉，包括 tooltip、下拉菜单、甚至 border-radius 渲染时的圆角过渡。
更隐蔽的问题是 Safari 旧版本中，overflow: auto 即使内容没溢出，也可能显示空白横向滚动条；而 overflow: hidden 在某些响应式断点下会让图片突然“消失”，调试时很难联想到是清除方式导致的。
- 不要在有
position: fixed子元素的容器上用，它会把 fixed 元素锚定范围锁死在父内 - 和
flex或grid容器混用时，可能干扰align-items行为 - 如果父容器本身有动画或 transform，
overflow: hidden还可能意外截断动画轨迹
clearfix 伪元素还没死，但只该用在特定场景
它现在存在的意义不是“功能最强”，而是“兼容最稳”。比如你接手一个还在用 IE11 兼容模式的政务系统，或者第三方 CMS 输出的 HTML 无法修改，这时 .clearfix::after 仍是最快兜底手段。
但写法必须严格：漏掉 content: "" 就不渲染伪元素；用 display: block 而非 display: table 会在 IE6/7 下失效；*zoom: 1 看似过时，但在某些金融内网的 IE11 兼容模式下仍是刚需。
- PostCSS 自动补全插件可能把
::after转成:after，需确认配置保留双冒号 - 全局 CSS 重置（如 normalize.css）有时会清空
::after的content，建议显式重写 - 如果父容器已设
overflow: hidden，再加 clearfix 毫无作用——BFC 已提前闭合，clear 失效
真正该淘汰的，其实是 float 布局本身
2026 年新项目里，float 几乎只保留在两个地方：图文环绕（img { float: left; }）、极少数无法改 HTML 的遗留后台。其余所有多栏、卡片列表、导航布局，都该用 display: flex 或 display: grid 替代。
这时候连“清除”这个动作都不存在了——flex 容器默认就是 BFC，clear 属性在 DevTools 里直接被划掉，不是优先级低，是浏览器压根不进清除逻辑。
- 别在
flex容器上写.clearfix类，它不会起作用，还可能因样式冲突引发 margin 折叠异常 - 如果老代码里浮动和 flex 混用，先统一加
float: none到所有子项，再删掉清除逻辑 - 最难的不是换掉 clearfix，而是说服产品接受：那个“文字绕图”的需求，其实用
shape-outside+float组合更现代，也比硬套 flex 更轻量
真正容易被忽略的是：清除浮动的 hack 没有消失，只是从“必选项”变成了“故障信号”。当你还在找最佳清除方式时，该先问一句——这个浮动，是不是本就不该存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
