img 的 align 属性在现代浏览器中基本失效，HTML5 已弃用；垂直对齐应使用 vertical-align（仅对 inline 元素生效）；图文环绕需用 float 配 clear；复杂布局推荐 flex 或 grid。

img 的 align 属性在现代浏览器里基本失效

HTML5 已正式弃用 align 属性，所有主流浏览器（Chrome、Firefox、Safari、Edge）对 <img align="middle"> 这类写法仅保留极有限的向后兼容，且行为不一致：IE 可能识别 center，Firefox 完全忽略，Chrome 会当作无效属性静默丢弃。它不是“还能用但不推荐”，而是“写了也大概率没反应”。

vertical-align 是控制图文垂直对齐的正确入口

当 <img> 和文字（如 <span> 或纯文本）处于同一行时，vertical-align 才是真正起效的属性。但它只对 inline 级元素生效——默认 <img> 是 inline，但若父容器用了 display: flex 或图片加了 display: block，vertical-align 就完全失效。

• 常用值：top（文字基线贴图顶）、middle（图中点对齐文字 x 高度中线）、bottom（图底贴文字基线）
• 慎用 baseline：受字体 line-height 和 font-size 影响大，同一段代码在不同字号下对齐位置可能偏移 2–3px
• 若文字用 <p> 包裹，必须给它加 display: inline-block，否则 vertical-align 不作用于 block 元素

文字环绕图片该用 float，但必须配 clear

要实现“图左/右 + 文字绕排”，float: left 或 float: right 仍是唯一原生支持该效果的 CSS 方案。但它会脱离文档流，导致后续块级元素上浮、父容器高度塌陷。

• 必须在环绕结束位置插入清除浮动：<div style="clear: both"></div> 或用伪元素 clearfix
• 响应式下风险高：小屏时若未设 max-width: 100% 和 height: auto，图片可能撑破容器或文字换行错乱
• 不要混用：float 放在 display: flex 容器内会被直接忽略，二者逻辑冲突

复杂对齐场景请直接上 flex 或 grid

当需求超出“单图+单行字”的简单排版——比如多图等宽排列、图+标题+描述三件套居中、响应式堆叠切换——float 和 vertical-align 都会迅速失控。flex 是当前最稳的选择。

• 图文并排垂直居中：display: flex 父容器 + align-items: center
• 图在左、文字在右、间距可控：gap: 1rem 比手动调 margin 更可靠
• 手机屏自动转竖排：flex-direction: column 配合媒体查询，无需清浮动、无塌陷风险

真正难处理的从来不是“怎么让图靠右”，而是靠右之后，缩放时是否溢出、换行后文字是否错位、父容器高度是否准确、后续元素是否被顶飞——这些细节，float 默认不管，而 flex 从设计上就覆盖了。