HTML5中img的align属性已废弃，必须用CSS控制对齐；文字环绕用float需清除浮动，非环绕场景优先用flex或text-align；响应式推荐flex/grid而非float。
align 属性在 <img> 上已废弃，别再用它控制浮动
HTML5 中 align 属性（如 align="left"）对 <img> 标签**完全失效**，现代浏览器会忽略它。你看到的“似乎还起作用”，其实是浏览器的向后兼容兜底行为，不可靠，且无法与 CSS 布局协同。真正可控、可维护的水平对齐和文字环绕，必须用 CSS。
用 float 实现文字环绕图像（传统但仍有场景）
如果你需要图像左/右浮动、文字自动环绕（比如图文混排的新闻正文），float 仍是直接有效的方案，但要注意清除浮动，否则后续内容会错位。
-
float: left让图像靠左，文字从右侧开始流式填充 -
float: right让图像靠右，文字从左侧填充 - 务必为图像父容器或后续元素添加
clear: both，或使用::after伪元素清除浮动（避免塌陷） - 注意：
float会让元素脱离文档流，可能影响父容器高度——这是最常被忽略的坑
<img src="a.jpg" style="float: left; margin-right: 12px;"> <p>这段文字会环绕在图片右侧……</p> <div style="clear: both;"></div>
更推荐用 display: inline-block 或 flex 控制水平对齐
当目标是“图像居左/居中/居右”且**不需文字环绕**（例如 banner 图、头像、按钮图标），float 反而多余。此时应优先用布局级 CSS：
- 图像单独一行居中？给父容器加
text-align: center（适用于inline或inline-block元素） - 图像与文字并排且需精确对齐？用
display: flex父容器 +align-items: center - 图像作为块级元素水平居中？设
margin: 0 auto并确保有明确宽度（或display: block） - 避免混用
float和flex—— 它们逻辑冲突，float在 flex 容器内会被忽略
响应式下 float 容易失控，flex 或 grid 更稳
在移动设备上，硬编码 float: left 可能导致图像挤出视口、文字换行异常。而 flex 可结合 flex-wrap 和媒体查询自然回退：
- 小屏时让图像和文字垂直堆叠：
flex-direction: column - 图像本身加
max-width: 100%和height: auto防止溢出 -
float没有响应式原生支持，所有适配都要靠额外 media query +clear+float: none组合，容易漏掉清除逻辑
真正难处理的不是“怎么让图靠右”，而是“靠右之后，换行、缩放、父容器高度、后续元素位置”是否全部可控——这些细节，float 默认不管，而 flex 和 grid 从设计上就覆盖了。
