推荐使用Flexbox：将按钮父容器设为flex并设置justify-content: flex-end，或对按钮自身设margin-left: auto；text-align: right仅对内联级按钮有效；float和绝对定位为备选，副作用明显。
直接用 text-align: right 最快，但只对按钮本身是内联级（display: inline 或 inline-block）时生效；真要稳、可维护、兼容现代项目，优先用 Flexbox。
button 在父容器里右对齐，用 justify-content: flex-end
这是目前最推荐的做法，不依赖按钮的 display 类型，也不影响文档流。
- 给按钮的直接父元素（比如
<div>）加display: flex和justify-content: flex-end - 如果父容器还有其他内容（比如文字或图标），想让按钮单独靠右、其余左对齐，就别用
justify-content，改用margin-left: auto加在按钮自身上 - 注意：父容器若原本有
text-align或float，得先清掉，否则可能干扰 Flex 行为
button 单独右对齐，又不想改父容器布局，用 margin-left: auto
这个技巧必须配合父容器是 Flex 容器才有效，不是所有场景都能直接套用。
- 父容器需设
display: flex（哪怕里面只有这一个按钮） - 按钮加
margin-left: auto，它就会被“推”到最右边 - 比
justify-content: flex-end更适合混合布局：比如左侧放标题、中间放状态、右侧放操作按钮，三个元素分别用margin-left: auto和margin-left: auto隔开
老项目或简单页面，用 text-align: right 要小心
它看似简单，但失效原因很隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 仅对内联级子元素起作用 —— 如果按钮被设了
display: block或width: 100%，text-align就完全没反应 - 父容器必须是块级元素，且不能有
overflow: hidden或transform等会创建新 BFC 的属性，否则某些浏览器下对齐会偏移 - 在表格单元格（
<td>）里用这个最安全，因为<button>默认就是inline-block，且<td>天然支持text-align
绝对定位和 float 是备选，不是首选
它们能达成效果，但副作用明显，日常开发中应尽量避开。
-
float: right必须处理清除浮动（clear: both或overflow: hidden），否则父容器高度塌陷，后续元素会上移 -
position: absolute要求父容器先设position: relative，且按钮脱离文档流后，无法参与响应式宽度计算，小屏下容易被裁切 - 两者都不支持 gap、自动换行、对齐基线等现代布局能力，维护成本高
真正麻烦的不是“怎么让它靠右”，而是“靠右之后，它还是否能和其他元素自然协作”。Flexbox 的 justify-content 和 margin-left: auto 把对齐逻辑收束在容器内部，不污染全局，这才是现代 CSS 布局的关键分寸。
