.clearfix 必须加在浮动元素的直接父容器上才有效，若加在兄弟元素或祖父容器则失效；响应式场景需用 .clearfix-{breakpoint} 匹配浮动断点；.float-none 不能替代清除浮动，现代布局应优先用 flex、grid 或 .d-flow-root。
直接用 .clearfix 但必须加对位置
清除浮动失效，八成是因为 .clearfix 没加在浮动元素的**直接父容器**上。它不作用于自身，也不传导到祖父级。
常见错误写法：
<div class="float-start">内容</div> <div class="clearfix"></div>
这完全无效——两个 div 是兄弟关系，不是父子关系。
正确写法是：
<div class="clearfix"> <div class="float-start">左浮</div> <div class="float-end">右浮</div> </div>
-
.clearfix只对常规文档流中的块级父容器有效 - 如果父容器用了
display: flex或display: grid，.clearfix会被忽略 - 如果父容器有
overflow: hidden，伪元素清除逻辑可能被截断，背景/高度仍塌陷
响应式浮动时，.clearfix 得配断点
你写了 .float-md-start，只在 ≥768px 浮动，那小屏下根本没浮动——此时若还用无前缀的 .clearfix，反而会在小屏引入多余空白。
应改用匹配断点的清除类：
-
.clearfix-md：仅在 ≥768px 生效，对应.float-md-start -
.clearfix-lg：仅在 ≥992px 清除，配合.float-lg-end - 没有
.clearfix-xs，最小断点是sm（576px）
漏掉断点匹配，是响应式布局中父容器“忽高忽塌”的最常见原因。
别把 .float-none 当清除手段
.float-none 只是让当前元素自己取消浮动，它对父容器塌陷、兄弟元素错位毫无作用。
典型误用场景：
<div class="float-start">A</div> <div class="float-none">B</div> <div class="clearfix"></div>
结果：A 仍在浮动，B 虽不浮但被 A 推偏，父容器依然塌陷——因为 .clearfix 加错了位置，且 .float-none 根本不解决清除问题。
记住：
-
.float-none是“本元素回归文档流” -
.clearfix-{breakpoint}是“父容器重新感知子元素高度” - 两者职责不同，不能互相替代
现代项目里，优先绕过 float
Bootstrap 5 中 .float-start / .float-end 已退居次要地位，仅适用于图文环绕等少数语义场景。如果你正用它做栅格、导航或卡片排列，问题不在怎么清浮，而在该不该用浮。
更稳的替代方案：
- 父容器加
.d-flex+.flex-wrap，子项自动排列，无需float，自然撑高 - 用
.d-grid配合grid-template-columns控制列数，响应式更直观 - Bootstrap 5.3+ 支持
.d-flow-root，一行代码触发 BFC，比.clearfix更干净
真正难处理的，是旧 JS 逻辑里那些依赖 offsetHeight 计算浮动容器高度的代码——换 layout 后它们会静默失效，得连着 DOM 和脚本一起查。
