text-align: right 适用于块级容器内行内内容右对齐，必须作用于包含文字的块级父容器；margin-left: auto 用于Flex容器中块级元素右对齐；float: right 适合图文环绕但需防塌陷；table整体右对齐用margin-left: auto，单元格内容右对齐才用text-align: right。
text-align: right 适合文本和行内内容右对齐
给父容器加 text-align: right 是最直接、兼容性最好的方式，适用于段落、按钮文字、span、a 等行内级内容。
常见错误是把它加在目标元素自身上——text-align 必须作用于**包含文字的块级容器**才生效。
<div style="text-align: right;"><span>这个会靠右</span></div>- 如果用
span包文字，别忘了它默认是行内元素，不需要额外设display；但若想让它独占一行并右对齐，得加display: block - 表格单元格内容右对齐也用这个：直接给
td或th加style="text-align: right;"，别加在table上
margin-left: auto 适合块级元素在 Flex 容器中右对齐
当你要让一个按钮、卡片或图片在横向布局中“贴右边缘”，且不希望影响其他子项位置时，margin-left: auto 是轻量又精准的选择——但它只在 display: flex 的父容器里可靠生效。
别在非 Flex 容器里乱试，否则可能没反应，或意外触发居中（比如同时写了 margin-right: auto）。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex和align-items: center（如需垂直居中） - 目标元素加
margin-left: auto，不用动justify-content - 多个子项时，只对最后一个右对齐，可用
.item:last-child { margin-left: auto; } - 错误写法：
margin: auto—— 这会让元素水平+垂直都居中
float: right 仍可用于图文环绕，但要防塌陷
如果需要文字绕着图片右侧排布，float: right 还是唯一自然的选择。但它会让父容器“看不见”这个元素的高度，导致后续内容上移（即塌陷）。
这不是 bug，是 float 的原始行为。现代修复方式很明确，别再用 clear: both。
- 给图片加
style="float: right; margin-left: 1em;"（留点间距） - 它的直接父容器加
style="display: flow-root;"，一句话解决塌陷 - 避免用
overflow: hidden作为兜底方案——它可能意外裁剪阴影或下拉菜单 - 别给
img自己加text-align: right，完全无效
table 整体右对齐和单元格内容右对齐不能混
这两个需求写法完全不同，混用会导致布局失控。查 computed styles 时经常发现 text-align 显示为 right，但表格就是不动——大概率是错加在了 table 标签上。
- 让整张表在页面中靠右：
<table style="display: block; margin-left: auto;"> <li>让某列数字右对齐：<code><td class="num-col">123.45</td>+.num-col { text-align: right; font-family: 'SFMono-Regular', monospace; } - UI 框架（如 Bootstrap）常设
td { text-align: inherit; }，所以即使父容器有text-align: right，也可能被继承链打断；显式写类名最稳 - 小数点对不齐？不是
text-align的问题，是字体和空格导致的——检查前后有没有空格、负号是不是 ASCII 减号
实际项目里最容易忽略的是继承和覆盖关系。加了
text-align: right 却没效果，十有八九是框架 CSS 或父级样式在背后悄悄改了值。打开开发者工具看 “Computed” 面板里的最终值，比猜快得多。
