.clearfix 在 bootstrap 5 中仍可用，其实际 css 为 .clearfix::after { content: ""; display: table; clear: both; }，仅作用于块级流中浮动子元素的父容器，遇 flex/grid/overflow: hidden 则失效。
.clearfix 在 Bootstrap 5 中仍可用，但它的实现已简化为仅依赖 ::after 伪元素 + display: table + clear: both；它只对纯块级流中的浮动子元素有效，一旦父容器启用了 flex、grid 或 overflow: hidden，就完全失效。
Bootstrap 5 的 .clearfix 实际 CSS 是什么
它本质是这段规则的封装：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点在于：
-
content: ""必须是非空字符串；写成content: none或漏掉，整个清除机制就失效 -
display: table比display: block更稳妥——在旧版 Safari 和某些缩放场景下，block可能不触发清除行为 - Bootstrap 5 已移除
zoom: 1等 IE8 兼容 hack，所以它不支持 IE11 以下，但换来更干净的代码
为什么加了 .clearfix 还没效果
常见错误不是类没写对，而是被更高层的布局模型或样式覆盖了：
- 父容器设了
overflow: hidden（比如某些卡片组件默认带），会截断::after的布局影响 - 父容器用了
display: flex或display: grid，此时clear: both对 flex item / grid item 完全无效 - 把
.clearfix加在浮动子元素上（如<div class="float-left clearfix">），而不是其父容器上——这是最常踩的坑 <li>父容器本身有 <code>height或min-height，掩盖了塌陷现象，误以为“已经生效” - 用
.d-flow-root替代.clearfix：等价于display: flow-root，天然创建 BFC，无需伪元素，也不受overflow干扰 - 若父容器本就该是行内布局，改用
.d-flex.flex-wrap，浮动子元素会自动成为 flex item，不再脱离文档流 - 仅当必须兼容 IE11 时，才退回
.clearfix；但要注意，IE11 不支持flow-root，也不支持::after在某些 SVG 容器里的表现
比 .clearfix 更可靠的现代替代方案
在 Bootstrap 5.3+ 中，优先用语义明确、副作用少的内置类：
最容易被忽略的一点
浮动本身正在退出主流布局：.float-left 在 Bootstrap 5 中只保留为图文环绕等极少数语义场景服务。如果你还在靠它做栅格或导航，那问题不在怎么清浮，而在该不该用浮。
