现代图文混排首选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;"> <img src="icon.png" alt="图标" style="width: 48px; height: 48px; flex-shrink: 0;"> <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> <img src="save.svg" alt="保存" style="vertical-align: middle; margin-right: 6px;"> 保存草稿 </button>
用 figure + figcaption 做语义化图注（SEO 与可访问性刚需）
只要图片不是装饰性的，就该用 figure 包裹，并配 figcaption。这不是“锦上添花”，而是 WCAG 和搜索引擎明确要求的结构。
-
figure是独立内容单元，自带语义；figcaption必须是figure的第一个或最后一个子元素 - 默认是块级，若要图文并列，仍需额外加
display: flex或float -
alt属性不能替代figcaption：前者是图片缺失时的兜底文本，后者是图片的说明性内容 - 屏幕阅读器会把
figure+figcaption当作一个整体朗读，顺序很重要
容易忽略的一点：如果图注文字很长，又想保持和图片同宽，得给 figcaption 加 width: 100% —— 它默认不继承父容器宽度。
