bootstrap 5 中 float-left、float-right、clearfix 已被彻底移除，非失效而是源码删除；.row 默认 flex 布局，浮动会破坏 flex 行为，应改用 d-flex、ms-auto、justify-content-* 等 flex 工具类替代。
float-left、float-right、clearfix 在 Bootstrap 5 中根本不存在——不是“失效”，是彻底移除。Bootstrap 5 的栅格和布局工具类全部基于 flexbox，没有浮动逻辑残留。强行保留 float 类只会引发不可预测的样式冲突。
为什么 float-left 在 Bootstrap 5 里搜不到 CSS 规则
Bootstrap 5 源码中已删除所有与 float 相关的 Sass 变量（如 $enable-float）、工具类生成逻辑和 CSS 输出。CDN 版本（如 bootstrap.min.css）里压根没编译这些规则，DevTools 自然查不到。
- Bootstrap 4 还留了开关（
$enable-float: false），而 Bootstrap 5 连这个开关都删了 -
.row默认是display: flex，子元素设float会脱离 flex 流，导致高度塌陷、等高失效、响应式断点错乱 - 即使你手动加
style="float: left"，也会被.col的flex: 0 0 auto覆盖，实际效果不可控
float-left / float-right 的直接替代方案
别试图“替换类名”，要按语义重写布局意图。常见场景对应关系如下：
- 文字环绕图片：用
d-flex align-items-start+me-3（不是mr-3，v5 已改用start/end） - 左右分栏（非栅格）：用
d-flex justify-content-between或d-flex flex-row - 右对齐单个元素（如按钮）：优先用
ms-auto（在 flex 容器内生效），而非模拟 float 位移 - 响应式方向切换（如小屏左对齐、大屏右对齐）：用
justify-content-sm-start justify-content-md-end
clearfix 还需要吗？怎么替代
不需要。只要父容器是 d-flex 或 .row（默认 flex），子项就天然不触发浮动塌陷。
- 若需包裹纯流式内容（如 Markdown 渲染块），改用
overflow: hidden或col类（它隐含min-width: 0防止溢出） - 旧版
clearfix常用于.row外层，现在可直接删掉——.row本身已解决塌陷问题 - 绝对定位元素仍需
position: relative父级，但无需额外 clearfix
容易被忽略的 flex 兼容性细节
迁移后最常踩的坑不在类名替换，而在 flex 行为差异：
-
.col在 flex 容器中宽度由flex属性控制，不是固定width；设width: 50%会和flex: 1冲突 -
order类（如order-md-1）改变渲染顺序，但 DOM 顺序不变，SEO 和屏幕阅读器仍按源码读取 - IE11 不支持部分 flex 属性（如
gap），若需兼容，得回退到 Bootstrap 4 或手写 fallback -
ms-auto和me-auto只在 flex 容器中生效，套在div里却忘了加d-flex是高频错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
