text-align: right 是唯一正确的右对齐方式，须作用于块级父容器以右排其行内内容；float: right 不适用纯对齐；现代布局优先用 flexbox 或 grid。
align 属性在 HTML 中曾用于右对齐，但它早已被废弃，现代浏览器虽可能兼容，但会导致 HTML 验证失败、破坏可访问性，且行为不可靠——别用。
text-align: right 是唯一该用的 CSS 方式
右对齐本质是内容在容器内的排列方式，不是元素自身的位置移动。text-align: right 作用于块级容器（如 div、p、th、td），让其内部的行内内容（文字、span、图片等）靠右排布：
- 必须写在父容器上，不是目标文本标签本身
- 对块级子元素（如另一个
div）无效，它只影响“文本流” - 表格单元格右对齐就该直接加在
td或th上，不要套额外div - 响应式下若小屏宽度不足，右对齐文字可能被截断，建议加
white-space: nowrap或overflow: hidden
float: right 不适合纯对齐，慎用
float: right 让元素脱离文档流、向右浮动，常被误当作“右对齐方案”，但它实际会引发连锁问题：
- 父容器高度塌陷（除非清除浮动）
- 后续兄弟元素会环绕其左侧，布局不可控
- 与 Flexbox/Grid 混用时冲突明显
- 仅适合图文混排、侧边栏等明确需要“脱离流”的场景，不是文本对齐的正解
现代布局中，优先用 Flexbox 或 Grid
当目标是让某个按钮、图标或整组元素“停在容器右边”，text-align 就不够用了——这时该换容器级布局控制：
- Flex 容器：父元素设
display: flex+justify-content: flex-end - 单个子元素右贴边：在 Flex 容器中给该子元素加
margin-left: auto - Grid 容器：父元素设
display: grid+justify-content: end - 绝对定位是最后选项：仅用于右上角关闭按钮这类脱离上下文的场景，需配合
position: relative父容器
真正容易被忽略的是语义和层级关系：text-align 看似简单，但一旦嵌套了 flex 或 grid 子元素，它的作用范围就消失了；而 float 的遗留影响在复杂 DOM 中常到调试后期才暴露。动手前先想清楚：你要对齐的是“内容”，还是“元素本身”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
