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