display: flow-root是现代浏览器中最干净的清除浮动方案，它通过创建BFC解决父容器高度塌陷，不裁剪溢出、不触发滚动、不干扰定位，但不兼容IE11及更早版本。
直接用 display: flow-root，只要不需兼容 IE 或旧版 Safari（clearfix 都干净、零副作用、一行解决。
为什么 clearfix::after 容易失效
不是写法错，而是几个隐性条件没满足：
-
content: ""缺失或为空格（如content: " "）→ 伪元素不渲染，clear: both白加 -
display值用了block而非table→ 在部分老浏览器中无法触发 BFC，清除不彻底 - 父元素本身有
height、min-height或position: absolute→ 高度被显式锁定，::after清除后也撑不开 - 类名没加到**直接包裹浮动子项的父容器**上，而是套在了外层 wrapper 里 → 清除作用域错位
overflow: hidden 看似简单，但真用时得盯住这三点
它靠触发 BFC 解决塌陷，但副作用藏得深：
- 下拉菜单、tooltip、fixed 定位弹层一旦超出父容器边界，会被直接裁剪（不是隐藏，是真截断）
- 配合
transform或will-change使用时，在某些 Chrome 版本中可能意外创建新层叠上下文，影响 z-index 行为 -
overflow: auto在内容刚好满屏时会闪出滚动条（尤其 macOS 上惯性滚动敏感），hidden更稳妥，但更“霸道”
现代项目优先选 display: flow-root，但别忽略它的兼容边界
它本质是专为“包含浮动”设计的 display 值，比 overflow 更语义、比 clearfix 更轻量：
- Chrome 58+、Firefox 57+、Safari 15.4+、Edge 79+ 全支持；若项目已放弃 IE 和 Safari
- 不干扰溢出行为，不影响阴影、定位元素展示，也不改变盒模型计算逻辑
- 不能和
display: inline混用（会退化为inline-block），且不适用于需要 inline 行为的场景（如内联容器）
真正难处理的，从来不是“怎么清”，而是“清完之后，父容器是否还参与文档流、是否影响兄弟元素间距、是否和 transform/clip-path 等属性冲突”——这些细节不会报错，但会在某个深夜改 UI 时突然浮现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
