text-align: right 对 img 本身无效，需作用于父容器；若无效，可能是图片为块级、父容器无宽度或存在 margin 干扰；推荐 float: right（配 display: flow-root）、margin-left: auto（配 display: block）或 Flexbox（父设 display: flex; justify-content: flex-end）。
text-align: right 对 <img> 本身无效，它只作用于块级容器内行内内容的对齐逻辑。图片默认是行内元素，但“靠右”不是靠设置它自己，而是靠控制它的定位方式或它所处的布局上下文。
为什么 text-align: right 加在父容器上经常没反应
常见错误现象：<div style="text-align: right"><img src="a.jpg"></div> 写了但图片不动，或只在行末偏移一点、甚至被截断。
-
text-align不移动元素，只调整行内内容在当前“行框”内的相对位置；如果图片是单独一行、父容器又没设宽，它就“无处可右” - 父容器是
<p>时，默认上下 margin 会造成视觉错位，误以为样式失效 - 给
<img>自己加text-align: right完全无效——该属性不能写在行内元素上 - 如果图片被设成
display: block，它就脱离了“行内内容”范畴，text-align立刻失效
float: right 最直接，但必须处理塌陷
这是兼容性最好、语义最轻的方案，适合图文混排（文字自动绕左）。
- 必须加在
<img>元素自身上：<img src="a.jpg" style="float: right; margin-left: 12px;"> - 父容器会高度塌陷（看起来像“消失”），修复方式优先用
display: flow-root包裹父<div>，比overflow: hidden更语义清晰 - 别用
clear: both加在图片后面——那是老式 hack，现代项目应避免 - IE8+ 支持，无兼容问题；但若后续内容不希望文字环绕，就得换方案
margin-left: auto 配合 display: block 更干净
适合单图独立右对齐、不绕排、不触发 BFC 的场景。
- 先设
display: block，否则margin对行内元素无效 - 再设
margin-left: auto，浏览器会把剩余水平空间全分给左边，图片就被“挤”到右边 - 父容器要是块级且宽度明确（如
width: 100%），这招 100% 有效 - 如果图片没设
width或max-width，在窄屏下可能溢出容器
Flexbox 是多元素统一右对齐的首选
当图片不是孤立存在，而是和文字、按钮等同在某个卡片或工具栏里，Flex 就比浮动或 margin 更可控。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于图片的直接父容器：
<div style="display: flex; justify-content: flex-end;"><img src="a.jpg"></div> -
<img>默认就是 flex item，无需额外设display - 父容器有其他内容时，记得确认是否要
flex-wrap: wrap，否则小屏下可能溢出 - 垂直方向可用
align-items调整，比如align-items: center实现垂直居中
padding、margin 或全局 CSS 重置规则干扰。调试时先检查外层盒子的盒模型，而不是反复改 <img> 的样式。 
