.clearfix 在 Bootstrap 5 中仍可用但非首选，仅对纯块级流中浮动子元素有效；若父容器启用 flex、grid 或 overflow: hidden，则失效。
直接说结论：.clearfix 在 Bootstrap 5 中仍能用，但不是首选；它只对纯块级流中的浮动子元素有效，一旦父容器用了 flex、grid 或 overflow: hidden，它就失效。
为什么 .clearfix 有时加了也没用
常见错误现象是给父 div 加了 .clearfix，但背景色还是不显示、高度仍是 0。根本原因不是类没加载，而是父容器本身已“拒绝接收”伪元素的清除效果：
- 父容器设了
overflow: hidden（比如某些卡片组件默认带），会截断::after的布局影响 - 父容器用了
display: flex或display: grid，此时浮动子元素虽仍脱离文档流，但clear: both对 flex item 无效 - 父容器是
position: absolute或transform触发的 BFC，也会干扰::after的清除行为
Bootstrap 5 的 .clearfix 实际怎么工作的
它本质是这段 CSS 的封装：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点在于：
-
content: ""必须是非空字符串，写成content: none或漏掉都会让整个机制失效 -
display: table比block更稳妥——在旧版 Safari 和某些缩放场景下，block可能不触发清除 - Bootstrap 5 已移除 IE8 兼容 hack（如
zoom: 1），所以它不支持 IE11 以下，但这也意味着更干净
比 .clearfix 更可靠的做法
现代项目里，优先用语义明确、副作用少的替代方案：
- 给父容器加
.d-flow-root（Bootstrap 5.3+ 内置），等价于display: flow-root，天然创建 BFC，无需伪元素 - 若父容器本就该是行内布局，改用
display: flex并设flex-wrap: wrap，浮动子元素会自动成为 flex item，不再脱离流 - 仅当必须兼容 IE11 时，才退回
.clearfix；但要注意，IE11 不支持flow-root，也不支持::after在某些 SVG 容器里的表现
最容易被忽略的一点：浮动本身正在退出主流布局——.float-left 在 Bootstrap 5 中只保留为图文环绕等极少数语义场景服务。如果你还在靠它做栅格或导航，那问题不在怎么清浮，而在该不该用浮。
