HTML5无图文混排专用标签，图文环绕全靠CSS实现；语义化推荐用<figure><figcaption>组合；float最兼容；shape-outside支持非矩形绕排；布局失效常因overflow、Flex/Grid或vertical-align干扰。
HTML5本身没有新增“图文混排专用标签”，图文环绕效果完全靠CSS实现；所谓“HTML5新特性”在图文排版中真正起作用的，是语义化结构（如
用和做语义化图文组合
这是HTML5明确推荐的图文搭配方式，专为独立、可抽离的媒体内容设计：
- 必须把
写在 内部且作为第一个子元素，确保读屏器先读标题再读图 -
的alt属性描述图像“有什么”，比如“柱状图：2024年Q1–Q4销售额对比”
说明“为什么放这里”，比如“图2：营销活动后Q3销售额增长37%，显著高于行业均值” - 不适用轮播图、头像、装饰性图标——这些直接用
加alt即可，套
反而破坏语义
用float实现兼容性最好的文字绕图
这是最成熟、浏览器全覆盖的图文环绕方案，至今仍广泛用于新闻、博客类页面：
- 给
设float: left或float: right，同时必须指定width（如120px），否则浮动可能失效
- 配合适当margin（如margin-right: 12px）让文字与图片保持呼吸感
- 后续段落若需恢复顶部对齐，插入或给下一个块级元素设clear: both
- 避免把
包在display: block的
里——这会切断它与邻近文本的行内上下文关系用shape-outside做非矩形文字环绕（现代浏览器）
想让文字沿着圆形头像、不规则PNG边缘流动，就得用这个CSS特性：
立即学习“前端免费学习笔记（深入）”；
- 仅对已设置float的元素生效，例如float: left; width: 100px; border-radius: 50%
- 配合shape-outside: circle(50%)可实现完美圆绕排；用shape-outside: url("mask.svg")可定义任意轮廓
- SVG遮罩需为纯黑底白形，无抗锯齿、无透明灰阶，否则部分浏览器无法识别形状
- Safari 15.4+、Chrome 107+支持良好，IE完全不支持，移动端需实测
避开常见失效陷阱
图文不绕排、文字全堆在图片下方，往往不是代码写错，而是布局环境被意外破坏：
- 父容器用了overflow: hidden或contain: layout，把浮动溢出部分裁掉了
- 段落被放进Flexbox或Grid容器里——浮动在这些布局中基本失效，得改用align-self + margin模拟位置
- 误加vertical-align: top等行内对齐属性，干扰基线导致换行异常
- 响应式断点没处理好，小屏时图片width未重设，造成浮动撑破容器
