float: right 元素掉行主因是宽度计算误差或布局干扰，非浮动本身问题；可靠解法是改用 flex 布局，父容器设 display: flex，右侧元素外层加 margin-left: auto 实现右对齐。
float: right 本身不会让元素“右对齐掉行”，掉行是宽度计算误差或布局干扰导致的；真正有效的解法不是调 float，而是绕开浮动模型本身。
为什么 float: right 元素会掉到下一行？
常见现象不是“没右对齐”，而是它根本没和左边元素同行——原因往往是：
- 父容器有
padding-right或border-right，而子元素默认box-sizing: content-box，可用宽度被吃掉 - HTML 中两个浮动元素之间有换行符或空格，浏览器渲染出约
4px不可控间隙 - 左侧
float: left元素总宽 + 间隙 + 右侧float: right宽度 > 父容器宽度（尤其在rem/%混用、缩放、高 DPI 屏下） - 父容器未触发 BFC，高度塌陷后，右侧元素实际“浮”在了上一行内容下方，视觉上像掉行
不改 HTML 结构时的快速修复法
若必须保留现有 DOM 和 float，优先尝试这些低成本补救：
- 给右侧元素加
margin-right: -1px或width: calc(25% - 2px)（注意别用24.9%，二次舍入更糟） - 统一父容器和所有浮动子项为
box-sizing: border-box，避免padding/border溢出 - 用伪元素清除浮动并撑开父容器：
.parent::after { content: ""; display: table; clear: both; }，否则后续布局全乱 - 禁用右侧元素的默认外边距：
margin: 0，特别是button、h1等 UA 样式较重的标签
真正可靠的替代方案：用 flex 替代 float
现代项目中，float 已不是布局首选。只需三步就能彻底避开掉行问题：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex; flex-wrap: wrap; - 左侧内容保持自然顺序，右侧需右对齐的元素统一包进一个
<div class="actions"> - 给
.actions加margin-left: auto;—— 它会在当前行末尾自动占满剩余空间，把内容推到最右
这个方案不依赖元素个数、不惧缩放、无小数误差，且 margin-left: auto 在 flex 中是标准行为，不是 hack。
Grid 布局下最后一行右对齐的误区
别指望 justify-self: end 或 :last-child 能解决“最后一行右对齐”。justify-self 只作用于单个网格项在其单元格内的对齐，且要求该列有空余空间；而 :last-child 选的是 DOM 最后一个子节点，不是视觉上最后一行的末尾元素。
真要控制最后一行某元素靠右，得显式包裹+推移：<div class="item"><button class="action">操作</button></div> → 给 .action 加 margin-left: auto，前提是它直接位于 grid 容器内，且父 .item 没阻断流式上下文。
