推荐使用Flexbox布局：将按钮父容器设为flex容器并设置justify-content: flex-end，或对按钮自身设margin-left: auto；其他方法包括float: right（需清浮动）、text-align: right（限内联元素）、绝对定位（需relative父容器）。
如果您希望在HTML5页面中将按钮元素水平靠右对齐，可通过CSS的多种布局方式实现。以下是几种常用且兼容性良好的方法：
一、使用 float: right
通过设置按钮的float属性为right，使其脱离文档流并浮动至其包含块的右侧边缘。该方法适用于简单单行内联级按钮，需注意父容器可能需要清除浮动以避免布局塌陷。
1、在HTML中定义一个button元素，并为其添加class名称，例如。
2、在CSS中为该class设置样式：.btn-right { float: right; }。
立即学习“前端免费学习笔记（深入）”；
3、若按钮所在父容器内还有其他内容，为防止后续元素错位，可在父容器末尾添加
或对父容器设置overflow: hidden。二、使用 Flexbox 布局（推荐）
将按钮的直接父容器设为flex容器，并利用justify-content属性控制主轴对齐方式，可精准、稳定地实现按钮靠右，且无需处理浮动副作用。
1、为按钮的父元素（如
2、在CSS中设置：.btn-container { display: flex; justify-content: flex-end; }。
3、如需按钮与其他元素保持间距，可添加margin-left: auto;替代justify-content，此时按钮将自动占据剩余空间左侧，实现右对齐效果。
三、使用 text-align: right（适用于内联上下文）
当按钮为内联级元素（默认display为inline-block），可通过对父容器设置text-align: right，使其中所有内联级子元素整体右对齐。
1、确保button未被显式设置为display: block; 或未受其他样式影响其内联特性。
2、为按钮的父容器添加样式：.parent { text-align: right; }。
3、注意：此方法仅对内联级或inline-block元素有效，若按钮设置了width: 100%或display: block，则该方式失效。
四、使用 margin-left: auto
在Flex容器中，对按钮自身设置margin-left: auto，可强制其被推至容器最右侧，适用于单个按钮或需与其他元素分离的场景。
1、将按钮父容器设为flex容器：.container { display: flex; }。
2、为按钮添加样式：button { margin-left: auto; }。
3、该方式不依赖justify-content，允许同一容器中其他子元素保持左对齐，而仅按钮右移。
五、使用绝对定位（适用于固定位置需求）
通过将按钮设为绝对定位，并配合right: 0和top/bottom值，可将其精确锚定在父容器右边界指定位置，适合脱离文档流的独立按钮。
1、为按钮父容器设置position: relative;，确保定位基准为其内部边界。
2、为按钮设置：position: absolute; right: 0; top: 50%; transform: translateY(-50%);。
3、必须确保父容器具有明确高度或足够内容支撑，否则绝对定位按钮可能重叠或溢出不可见。
