bootstrap 5.3 仍保留 .clearfix 是为兼容性与可控性设的“安全阀”，仅在显式使用 float 且父容器未触发 bfc 时按需生效，源码中仅为 .clearfix::after { content: ""; display: table; clear: both; } 的空壳实现，不参与默认布局链。
因为清除浮动类（如 .clearfix）不是“过时”，而是“待命”——它只在你主动启用 float 时才被需要，而框架必须为这种显式行为兜底。
为什么 Bootstrap 5.3 还留着 .clearfix？
它没被删，是为兼容性与可控性留的“安全阀”：
-
.clearfix在 Bootstrap 5.3 源码里确实只剩一个空壳：.clearfix::after { content: ""; display: table; clear: both; }，不参与任何默认布局链 - 它不自动注入、不默认启用，只在你明确写上
class="clearfix"时才生效——属于“按需触发”，不是“默认加载” - 第三方组件（比如老版轮播图、图表库 tooltip 定位逻辑）仍可能依赖
float，此时.clearfix是唯一无需改源码就能修复塌陷的方案 - 调试阶段快速验证是否为浮动导致问题：加一个类就能隔离变量，比临时改布局模型更轻量
.clearfix 在现代布局中真的有用吗？
有用，但使用场景极窄，且容易误用：
- 仅当父容器是普通块级元素（
display: block）、未设overflow、未用d-flex/d-grid时，.clearfix才起作用 - 若父容器已带
class="d-flex clearfix"，.clearfix完全无效——clear: both在 Flex Formatting Context 中被忽略 - 响应式浮动（如
.float-md-start）搭配无前缀.clearfix可能造成小屏下多出伪元素空白，应改用.clearfix-md - 常见翻车点：给卡片组件（本身含
overflow: hidden）硬加.clearfix，结果伪元素被裁剪，高度照样塌陷
为什么不直接删掉 .clearfix？
删了会断掉真实存在的依赖链：
- 大量遗留项目仍在混用
float和 Bootstrap 5，删除.clearfix会导致页面局部塌陷且无替代路径 - 某些构建工具或插件（如旧版 Webpack CSS 提取逻辑）会扫描类名做 tree-shaking，若类名消失，可能引发不可预知的样式缺失
- Bootstrap 的设计哲学是“渐进替代”，不是“暴力清零”——保留
.clearfix不妨碍你用d-flex，但删了就回不去了 - 它成本极低：一个伪元素、无 JS、无重排，只是多一行 class，对性能几乎无影响
真正容易被忽略的是：.clearfix 从不解决浮动带来的全部问题。它只管父容器高度，不管文字环绕错位、z-index 层叠异常、断点切换时的对齐偏移——这些都得靠换布局模型来根治。留着它，不是因为它好，而是因为它在那个特定时刻，是你手边最短路径的扳手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
