align属性已废弃，不能替代浮动；应使用float配合clear或BFC解决塌陷，但多数场景推荐flex、text-align或grid实现对齐，同时需设max-width:100%防溢出。
别用 align 属性做浮动 —— 它已废弃，且行为不可控，现代项目中基本等同于埋雷。
为什么 align 属性不能当浮动用
align 是 HTML4 时代的遗留属性，浏览器虽仍支持（如 <img align="left">），但它不触发 CSS 浮动流，也不影响后续元素的文档流位置。它只是粗粒度地“把图片往左/右挤”，文字环绕逻辑混乱、跨浏览器表现不一致（尤其在 IE 和旧 Android WebView 中），且完全无法响应式适配。
- 写
<img src="a.jpg" align="right">→ 文字可能只在第一行绕开，第二行直接从左顶格开始 - 设
align="middle"→ 实际对齐的是文本基线，不是视觉中心，常导致“看起来偏下” - 和 CSS
float同时存在时，align被忽略，但开发者容易误以为它还在起作用
float 确实能实现文字环绕，但必须配 clear
若你真需要文字环绕图像（比如图文混排的博客正文），float: left 或 float: right 是唯一可靠选择，但必须处理浮动塌陷问题 —— 否则父容器高度会坍缩为 0，后续内容上移错位。
- 正确写法：
<img src="a.jpg" style="float: left; margin-right: 12px;">+ 紧跟一个<div style="clear: both;"></div> - 更稳妥的做法是给父容器加
overflow: hidden或使用 BFC 触发（如display: flow-root） - 注意：浮动后图像脱离正常流，
margin: auto居中失效；也不能和flex容器共存 ——float在 flex 容器内被强制忽略
真正该用什么替代 align 和裸 float
绝大多数所谓“图像水平对齐”场景，其实根本不需要文字环绕 —— banner、头像、卡片图标、按钮内嵌图，都是独立视觉单元。这时候强行用 float 或 align 反而增加维护成本。
- 单图水平居中 → 父容器加
text-align: center，或图片自身设display: block; margin: 0 auto - 图+文并排且需对齐 → 父容器用
display: flex; align-items: center，图片不用任何浮动 - 多图等宽水平排列 → 用
display: flex; justify-content: space-between或grid，比反复调float+margin清晰得多 - 响应式要求高（如小屏堆叠）→
flex-direction: column一行切换，float需额外 media query +clear+float: none组合，极易漏掉清除逻辑
最容易被忽略的细节：图像尺寸失控
无论用 float 还是 flex，只要图像原始尺寸大于容器，就会溢出或拉伸变形 —— 这不是对齐问题，而是布局前提没守住。
- 必须给
<img>加max-width: 100%和height: auto，否则在窄屏或弹性容器中必然破版 - 如果图像作为背景图使用，应改用
background-image+background-size: contain/cover，而非硬塞<img> -
vertical-align在行内上下文中依然有效（比如<span><img></span>），但它的对齐基准是文本基线，不是容器中线；要精确控制，优先让图像脱离行内流（display: block或flex）
