HTML5中align属性已废弃，应使用CSS的float、text-align、Flexbox或绝对定位；其中float用于文字环绕，text-align控制父容器内行内图片对齐，Flexbox更现代可控，绝对定位仅适用于装饰性元素。
用 align 属性？别用了，它已废弃
HTML5 中 align 属性（如
最常用也最稳妥：CSS 的 float 和 text-align
图像左右对齐本质是**文本流内布局问题**，取决于 img 所在容器的上下文：
- 如果 img 在段落、div 等**行内流环境**中，用
float: left或float: right最直接，文字会自动环绕 - 如果 img 是独立块（比如单独一行），想让它整体左/右贴边，给父容器设
text-align: left或text-align: right即可（前提是 img 为行内元素，默认就是） -
text-align对父容器生效，不是加在 img 上；float则必须加在 img 自身上
示例：
—— 整个图片右对齐；@@##@@
文字内容 @@##@@ 后续文字会绕到左边
现代布局首选：Flexbox 控制单图位置
当需要精确控制单张图在容器中的左右（甚至居中、撑满等），Flexbox 更清晰可控，且无浮动带来的清除问题：
立即学习“前端免费学习笔记（深入）”；
- 给图片的**直接父容器**设
display: flex - 用
justify-content: flex-start（左）、justify-content: flex-end（右）、justify-content: center（居中） - 如果父容器高度固定，还可配合
align-items垂直调整
注意：此时 img 默认是 flex item，无需额外设 display；若父容器已有其他内容，需确认是否要 flex-wrap: wrap 避免溢出。
绝对定位？慎用，仅限特定场景
position: absolute 能强行把图钉在容器左/右边缘，但会脱离文档流：
- 父容器必须设
position: relative，否则定位基准是整个页面 - 文字不会绕图，后续内容会“无视”这张图向上/向下塌陷
- 响应式下容易错位，比如小屏时
right: 0可能导致图片被截断
只建议用于装饰性图标、角标等不参与主内容流的元素。
真正容易被忽略的是：图像对齐效果常被父容器的 padding、margin 或 CSS 重置规则干扰，调试时优先检查外层盒子的盒模型，而不是反复改 img 的样式。
