Bootstrap 5 中 float-right 失效是因为彻底移除了该类，改用 text-end（行内内容右对齐）、ms-auto（flex 内单元素右推）和 justify-content-end（flex 容器子项整体右对齐）替代，且均依赖正确父容器显示模式。
Bootstrap 5 中 float-right 为什么失效了
因为 Bootstrap 5 彻底移除了 float-left 和 float-right 这类旧版浮动工具类。如果你从 v4 升级过来，直接写 class="float-right" 会完全没效果——CSS 里根本没定义这个类，浏览器自然不执行右对齐。
这不是 bug，是主动弃用：浮动布局在现代 CSS 中已不推荐用于整体排版，尤其响应式场景下容易破坏文档流、引发高度塌陷等问题。
用 text-end 实现行内内容右对齐
这是最常见也最轻量的替代方案，适用于按钮、文字、小图标等行内级或可内联显示的元素。
-
text-end对应 CSS 的text-align: right，只影响子元素的**文本对齐方式**，不改变自身位置 - 它在所有断点都生效；如需响应式控制，可用
text-sm-start、text-md-end等组合 - 注意：如果目标元素是
div且设置了width或display: block，text-end不会让它“靠右”，只会让它的内部文字右对齐
<div class="text-end"> <button class="btn btn-primary">提交</button> </div>
用 ms-auto 实现 flex 容器内右推
当你要把某个组件（比如导航栏里的登录按钮）“顶到右侧”，而它和左侧元素同属一个 flex 容器时，ms-auto 是最稳妥的选择。
-
ms-auto表示「自动分配左边距」（margin-start auto），利用 flex 的剩余空间挤压效果实现右对齐 - 必须确保父容器有
class="d-flex"（或d-inline-flex），否则无效 - 在水平 flex 布局中，
ms-auto等价于 v4 的ml-auto；v5 统一用ms/me替代ml/mr以支持 RTL - 多个元素同时加
ms-auto会全部挤到最右并挨在一起，如需间隔，得额外加me-2类控制右边距
<nav class="d-flex align-items-center"> <div class="me-3">Logo</div> <div class="ms-auto"><button class="btn btn-outline">登录</button></div> </nav>
用 justify-content-end 对齐整行 flex 子项
当你希望一整组按钮、卡片或导航链接全部右对齐排列（而非单个元素右推），该用这个容器级工具类。
-
justify-content-end是 flex 布局的主轴对齐方式，作用于父容器，影响所有直系子元素 - 它和
ms-auto的关键区别在于：前者让所有子项集体右靠，后者让某一个子项单独右推（其余保持左/居中） - 如果子项本身是
flex容器或设置了flex-grow，可能覆盖对齐效果，需检查嵌套层级 - 别忘了搭配
d-flex使用，否则类名无意义
<div class="d-flex justify-content-end"> <button class="btn btn-sm me-1">取消</button> <button class="btn btn-sm btn-primary">保存</button> </div>
真正容易被忽略的是上下文：右对齐不是独立操作，它依赖父容器的 display 模式。text-end 要求内容可内联，ms-auto 和 justify-content-end 都要求父级是 flex。看到不对齐，先查父容器有没有 d-flex 或是否意外触发了 display: grid —— 否则再换类名也没用。
