bootstrap 5.3 中 clearfix 基本可删除，因其依赖的 float 已被 grid 和 flex 取代；仅在第三方组件、遗留代码或调试浮动塌陷时需保留，对 d-flex/d-grid 容器无效且有裁剪等隐蔽副作用。
Bootstrap 5.3 中 clearfix 基本可以删了
除非你主动写了 float: left 或 float: right，否则 clearfix 不起作用，也完全不需要。Bootstrap 5.3 已彻底放弃 float 作为网格基础，改用 display: grid 和 d-flex，父容器塌陷问题自然消失。
常见错误现象：给一个 div 加了 class="clearfix"，但里面子元素根本没浮动，布局也没异常——这说明它纯属冗余，删掉不影响任何表现。
使用场景仅限于：
• 第三方组件强制依赖 float（比如某些老版轮播图）
• 遗留代码中仍混用 float 布局
• 临时调试时想快速验证是否为浮动导致塌陷
clearfix 为什么对 d-flex 或 d-grid 容器无效
因为 clearfix 的原理是通过 ::after 伪元素触发 BFC（块级格式化上下文），而 display: flex 和 display: grid 本身就会创建新的格式化上下文（Flex Formatting Context / Grid Formatting Context），和 BFC 并不兼容——伪元素的 clear: both 在这里被直接忽略。
容易踩的坑：
• 给 class="d-flex clearfix" 这种组合加类，以为“多加一层更保险”，实际 clearfix 完全不生效
• 调试时发现塌陷依旧，误以为是 clearfix 没写对，其实根源是不该用 float
• 用 overflow: hidden 强行补救，结果下拉菜单、tooltip 等绝对定位内容被裁剪，排查困难
替代 clearfix 的现代方案优先级
真遇到塌陷，别修浮动，直接换布局模型：
• 优先用 class="d-flex"：一行内子元素自动等高、对齐可控、响应式天然支持
• 其次用 class="d-grid" 配 grid-template-columns：两栏/三栏布局语义清晰，无需清除逻辑
• 实在要兼容旧环境且不能改结构，才考虑 class="d-flow-root"：它比 clearfix 更干净，只创建 BFC，不插入伪元素，也不影响溢出内容显示
• overflow: hidden 是最后选项：副作用太明显，尤其当内部有 position: absolute 子元素越界时
clearfix 的隐蔽副作用比你想象的严重
它不只是“多插一个伪元素”那么简单。由于强制触发 BFC，所有超出父容器的内容（比如 dropdown-menu 向下展开、box-shadow 外扩、transform: translateY(-100%) 上移的提示框）都会被裁剪，而且不会报错、不显红、不警告——你只能靠经验或反复删样式来定位。
更麻烦的是语义错位：clearfix 名字暗示“清除浮动”，但它实际干的是“让父容器假装看见浮动元素”。后期维护者看到这个类，第一反应是“这里有浮动”，可真实代码里可能早就不浮动了，反而误导排查方向。
真正该关注的，不是怎么清浮动，而是为什么还在用浮动。
