.clearfix 必须加在浮动子元素的父容器上才有效；加在子元素或其他位置无效，且在 flex/grid 布局、overflow 覆盖或样式优先级干扰下会失效，bootstrap 4/5 实现不同，推荐改用 flex/grid 或统一版本。
.clearfix 类必须加在浮动子元素的父容器上，加在子元素自身或任意其他位置都无效。
.clearfix 为什么有时加了也不起作用
常见错误现象：div 包着几个 float: left 的按钮或卡片，加了 .clearfix 后父容器依然高度塌陷。
- 父容器设置了
overflow: hidden或overflow: auto：这会创建 BFC，但同时会裁剪溢出内容（比如position: absolute的下拉菜单），且覆盖::after的清除行为 - 父容器用了
display: flex或display: grid：现代布局模型天然不依赖浮动，.clearfix完全被忽略 - 自定义样式中存在更高优先级的
height、min-height或border：掩盖了塌陷，误判为“已生效” - Bootstrap 版本混用：Bootstrap 4 的
.clearfix含zoom: 1（IE8 兼容 hack），若项目已移除 IE 支持却仍用旧版 CSS，可能引入冗余声明
.clearfix 在 Bootstrap 4 和 5 中的实际差异
- Bootstrap 4：
::before和::after均设为display: table，::after再加clear: both，并保留zoom: 1 - Bootstrap 5：去掉
zoom: 1，仅用::after { content: ""; display: table; clear: both; }，更轻量也更符合现代标准
两者都要求父容器是常规文档流中的块级元素（即未被 flex/grid/absolute 等脱离）。
如果你用的是 Bootstrap 5，但项目里还手动引入了旧版 bootstrap.css（比如从 CDN 加载 v4.6），.clearfix 行为可能不一致——建议统一版本并检查 DevTools 中最终计算出的样式。
替代 .clearfix 的三种更稳方案
- 直接改父容器为
display: flex：子项自动排列，无需float，自然撑高，响应式控制也更直观 - 改用
display: grid：例如grid grid-cols-2 gap-2（Tailwind）或display: grid; grid-template-columns: 1fr 1fr;（原生 CSS） - 用
overflow: auto临时兜底：能触发 BFC 撑高，但会多出滚动条（哪怕没溢出），且影响position: sticky等行为，只适合调试阶段快速验证
真正难处理的不是怎么清浮，而是旧代码里那些隐式依赖浮动高度计算的 JS 逻辑——比如某段脚本通过 offsetHeight 获取容器高度来做动画，一旦你换成 flex，它可能突然失效。这类耦合点往往藏得深，得连着 JS 一起看。
