figure/figcaption 不适合文字环绕，因其语义是声明独立图元及说明，非排版工具；默认块级渲染、DOM顺序限制与流式布局冲突；强行用float或flex会破坏可访问性与响应式表现。
figure 和 figcaption 本身不提供文字环绕能力，强行用它们实现“图文混排”会破坏语义、损害可访问性，且在多数场景下反而更难控制。
为什么 figure/figcaption 不适合做文字环绕
它俩的职责是声明「独立图元 + 其说明」，不是排版工具。浏览器默认把 figcaption 渲染为块级元素、置于图片上下（非左右），且 DOM 顺序强制要求 figcaption 必须是 figure 的首或尾子元素——这和文字环绕所需的内联流式布局天然冲突。
- 试图用
float或shape-outside包裹整个figure，会导致figcaption被挤出可视区或与文字重叠 - 把文字塞进
figure内部（比如<p>文字</p>放在<img>旁边）：违反规范，figcaption语义失效，读屏器无法识别哪段是图注 - 用
display: inline-block或flex强行拉平：figcaption会失去默认居中、字号缩放等可访问性友好行为，窄屏下极易溢出或换行错乱
真正该用什么实现文字环绕
需要图文混排时，应放弃 figure 语义封装，改用语义中立但布局自由的容器：
- 纯装饰性配图 → 用
<img>加float: left/right，配合margin控制间隙；文字自然绕排 - 需保留 alt 描述但不要图注 → 直接
<img src="" alt="...">，不套figure - 需要响应式断点控制环绕方向（如小屏堆叠、大屏环绕）→ 用
grid或flex布局包裹<img>和相邻段落，通过@media切换grid-template-areas或flex-direction - 复杂形状环绕（如文字绕圆角图）→ 用
shape-outside: circle()配合float，但必须确保该图无语义需求（即不需编号、不需被引用）
figure + figcaption 的正确响应式用法
当内容确实满足「可抽离性」（如论文插图、代码截图），又需适配不同屏幕时，应保持语义结构不变，仅调整容器表现：
立即学习“前端免费学习笔记（深入）”；
- 小屏下默认堆叠（图上/下 + 文字）：无需额外样式，
figure天然流式 - 中大屏希望左图右文 → 给
figure设display: flex; align-items: flex-start;，并约束img宽度（如max-width: 50%），figcaption用margin-left: 1em分隔 - 避免给
figcaption设固定宽或white-space: nowrap，否则窄屏下文字撑破容器 - 务必加
figure img { display: block; }，否则图片下方因基线对齐产生空白间隙
真正容易被忽略的是：所谓“响应式图文环绕”，90% 的实际需求其实不需要 figure——它只服务于可引用、可抽离的图元。混用语义标签和布局需求，最后往往要花三倍时间修 bug，而不是写功能。
