最推荐Flex布局（justify-content: flex-end），因其无塌陷、响应式友好；次选float:right需处理父容器塌陷；absolute定位适合脱离文档流场景；Grid的justify-self:end适合单元素精准控制。
用 float: right 快速右对齐，但得处理父容器塌陷
这是最直接的方案，尤其适合老项目或简单布局。给盒子加 float: right，它就会贴着父容器右边缘。但注意：父容器高度会“消失”——因为浮动元素脱离文档流，父容器无法感知其高度。
- 必须给父容器加
overflow: hidden或clearfix（比如伪元素::after { content: ""; display: table; clear: both; }）来包裹浮动 - 如果父容器本身有
padding-right，浮动盒子可能被挤出可视区，要检查 - 多个浮动元素并排时，HTML 顺序影响布局方向，
float: right的元素会从右往左排列
position: absolute 右定位，适合脱离流的独立盒子
当盒子不需要参与文档流（比如悬浮按钮、侧边提示），用绝对定位最可控。关键是父容器得是相对定位上下文，否则会相对于 body 定位。
- 父容器必须设
position: relative（或absolute/fixed） - 盒子加
position: absolute; right: 0;即可贴右；加top: 0或bottom: 0控制垂直位置 - 如果父容器宽度变化（如响应式），
right: 0仍保持贴右，但盒子自身宽度超父容器时会溢出，需配合max-width或overflow
Flex 布局用 justify-content: flex-end，现代首选
父容器设为 display: flex，再用 justify-content: flex-end，子盒子就自然靠右。逻辑清晰，无塌陷问题，响应式友好。
- 只对直接子元素生效，嵌套层级要注意
- 如果父容器还有其它子元素，默认会全部挤到右边；想让某个盒子单独靠右，可用
margin-left: auto（更灵活，不依赖顺序） - IE10+ 支持，但 IE10/11 对
flex-wrap和某些属性有 bug，纯右对齐场景基本够用
Grid 布局用 justify-self: end，精准控制单个盒子
当父容器是 display: grid，且你只想动某一个子项的位置，justify-self: end 比 Flex 更细粒度——不用改父容器的主轴对齐方式，也不影响兄弟元素。
- 前提是父容器已声明
display: grid（哪怕没定义grid-template-columns，默认也是单列网格） - 该属性在 Firefox、Chrome、Safari 稳定支持，IE 完全不支持
- 如果盒子本身设置了
width: 100%，justify-self: end仍会让它右对齐，但内容可能因盒模型表现异常，建议搭配box-sizing: border-box
实际选哪个，取决于你是否需要盒子参与文档流、父容器是否已有布局约束、以及兼容性底线。Flex 是目前最平衡的选择，但别忘了：如果盒子后面还有其他非浮动内容，float: right 会导致它们“上浮”占位，这个视觉错位很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
