CSS右浮动按钮跑偏该如何处理？

右浮动按钮跑偏本质是脱离文档流导致父容器失高和兄弟元素重排；修复应给直接父容器设display: flow-root或overflow: hidden，现代项目推荐用flex/grid替代float。

右浮动按钮跑偏，本质不是按钮自己“飘了”，而是它脱离文档流后，父容器失去高度控制、兄弟元素被迫重排造成的连锁错位。

为什么 float: right 会让按钮看起来“跑偏”

浮动元素会脱离标准文档流，但它的“占位空间”仍由父容器当前行内剩余宽度决定。如果父容器不够宽，或前面有其他浮动元素，float: right 的按钮就会向上挤——不是往右移，而是把左侧块级兄弟元素的底部线往上抬，造成视觉上“按钮卡在中间”“文字缩进异常”“提交按钮贴着上一项”等现象。

1. 常见错误现象：margin-left 对左侧内容无效、加了 clear: both 反而更乱、<p> 内文字绕浮点排版断句奇怪
2. 不要给左侧内容也设 float: left —— 两个浮动兄弟会互相争夺行高，加剧错位
3. float 在 display: flex 或 display: grid 容器中直接被忽略，此时写也无效

修复跑偏最稳妥的两种做法

核心是让父容器“收住”浮动影响，而不是在按钮上反复调 margin 或 position。

1. 给按钮的**直接父容器**加 display: flow-root（推荐）：它专为创建 BFC 设计，能包裹浮动子元素，且不会裁剪 box-shadow、下拉菜单等溢出内容，Chrome 58+ / Firefox 57+ / Safari 10.1+ 均支持
2. 退而求其次，用 overflow: hidden（兼容性更好）：IE6+ 都支持，但风险是可能意外裁剪弹层、Tooltip 等需要溢出的内容
3. 别只给按钮加 clear: both —— 这只能让按钮回到下一行顶部，治标不治本；真正要修的是包裹它的容器

现代项目里，直接停用 float 更省心

浮动本就不是为 UI 控件对齐设计的。用语义清晰、行为可预测的方案替代，一劳永逸。

1. 按钮需靠右？父容器设 display: flex，按钮加 margin-left: auto
2. 按钮需固定在右下角？用 position: fixed; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom))，别碰 absolute（Modal、transform 下极易失效）
3. 表单内按钮错位？整个表单容器改用 display: flex; justify-content: flex-end，不再依赖浮动清不干净的 .clearfix

真正容易被忽略的是：跑偏从来不是样式没写够，而是你正用图文环绕机制（float）强行做布局。工具用错了，补丁越打越多。