现代图文混排首选flex或grid布局；float仅适用于长文插图环绕；vertical-align适用于小图标行内对齐；figure+figcaption是语义化图注的刚需方案。

直接用 float 实现文字环绕图片，现在已不推荐作为首选；真正稳定、可控、响应式友好的图文混排，应优先用 display: flex 或 display: grid 布局。

用 flex 实现左右图文并列（最常用）

这是现代项目中占比最高的图文混排方式，适合卡片、简介、产品描述等场景。关键不是“把图片和文字塞进一行”，而是让容器主动管理对齐与间距。

• display: flex 必须加在父容器上，不是 img 或 p
• 用 align-items: center 垂直居中——否则文字基线会和图片底部对齐，看起来像“吊着”
• 用 gap: 16px 控制图文间距，比分别写 margin 更干净、不易冲突
• 给图片加 flex-shrink: 0，防止小屏幕下图片被压缩变形
• 文字部分用 flex-grow: 1 占满剩余空间，避免文字过短时右侧留白

示例：

<div style="display: flex; align-items: center; gap: 16px;">
  @@##@@
  <p style="margin: 0; flex-grow: 1;">这是一段自适应宽度的文字</p>
</div>

用 float 实现文字环绕（仅限文章正文插图）

它没被淘汰，但适用范围极窄：只适合长篇文章中单张插图+多段文字自然环绕的场景。一旦用错地方，就会触发浮动塌陷、后续元素错位、响应式失效等问题。

• 必须给父容器加 overflow: hidden 或伪元素清除浮动，否则布局会“漏”
• float: left 时，文字从右开始环绕；float: right 时，文字从左开始环绕
• margin 要设在 img 上，比如 margin: 0 12px 8px 0（右/下留空），不能靠文字的 padding 撑开
• 不要给文字容器设固定宽高，否则环绕会卡死；让它保持自然块级流

错误示范：float 用在卡片列表里、或和 flex 混用，基本等于主动埋雷。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

用 vertical-align 对齐行内图文（小图标+文字按钮/标签）

当图片是 16×16 或 24×24 的小图标，且和文字在同一行内（如按钮、导航项、状态标签），vertical-align 是最轻量、最精准的对齐手段。

• 只对 display: inline 或 inline-block 元素生效，img 默认就是 inline
• vertical-align: middle 是最常用值，但它对齐的是“行框中点”，不是容器中点；若文字有 line-height，需同步调整
• 避免用 top/bottom，它们依赖父元素行高，极易在不同字体下偏移
• 图标后加 margin-right 比用 padding 更安全，不会撑大行高

示例：

<button>
  @@##@@
  保存草稿
</button>

用 figure + figcaption 做语义化图注（SEO 与可访问性刚需）

只要图片不是装饰性的，就该用 figure 包裹，并配 figcaption。这不是“锦上添花”，而是 WCAG 和搜索引擎明确要求的结构。

• figure 是独立内容单元，自带语义；figcaption 必须是 figure 的第一个或最后一个子元素
• 默认是块级，若要图文并列，仍需额外加 display: flex 或 float
• alt 属性不能替代 figcaption：前者是图片缺失时的兜底文本，后者是图片的说明性内容
• 屏幕阅读器会把 figure + figcaption 当作一个整体朗读，顺序很重要

容易忽略的一点：如果图注文字很长，又想保持和图片同宽，得给 figcaption 加 width: 100% —— 它默认不继承父容器宽度。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！