常见错误是未将图片设为块级元素并设置宽高，因shape-outside仅对浮动块盒生效；svg需内联、坐标对齐、配shape-margin；firefox不支持外链svg且仅认content-box/border-box。
float 配合 shape-outside 为什么文字不绕行
常见错误是直接对图片用 float: left 再加 shape-outside，但没设 width 和 height，或忘了图片必须是块级元素。CSS 要求 shape-outside 只对浮动的**块盒（block box）** 生效，而 <img alt="CSS如何实现图文混排的精美布局_通过float属性与shape-outside配合css" > 默认是替换内联元素，不产生块格式化上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block和显式宽高（比如width: 200px; height: 200px;） -
shape-outside的值必须是可计算的形状，如circle(50%)、ellipse(60% 40%)或url("mask.svg")；不能是inset(0)这种无偏移的矩形（它等价于默认盒模型，无绕排效果） - 确保父容器没有
overflow: hidden或contain: layout，这些会截断浮动流，导致绕排失效
SVG mask 用 shape-outside 时文字被裁掉或错位
用 shape-outside: url(#my-shape) 指向 SVG 内的 <clippath></clippath> 或 <path></path> 时，常出现文字突然消失、只绕半边、或整体右移——根本原因是 SVG 坐标系与 HTML 盒模型未对齐，且 shape-margin 缺失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- SVG 必须内联在 HTML 中（不能外链），且
<path></path>的d属性坐标需基于图片原始尺寸设计（例如图片是 300×200，路径坐标就别写成 0–1000） - 务必配
shape-margin: 10px（或其他正值），否则文字紧贴形状边缘，易因字体渲染微偏显得“卡住” - 避免在 SVG 中使用
transform或viewBox缩放，优先用width/height控制 SVG 容器尺寸，保持坐标系线性映射
Firefox 下 shape-outside 不生效或表现异常
Firefox 对 shape-outside 的支持较保守：它不支持 url() 形式引用外部 SVG，也不支持 margin-box 作为参考盒（仅支持 content-box 和 border-box），且对 shape-image-threshold 的解析有偏差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃外链 SVG，改用内联
<svg></svg>+<path></path>，并确保id可被 CSS 正确引用 - 显式声明
box-sizing: border-box，避免 Firefox 默认按content-box解析导致形状偏小 - 若需兼容旧版 Firefox（float +
margin手动留白，shape-outside加@supports条件包裹
图文混排后段落首行缩进或行高错乱
绕排区域会影响整段文字的行框（line box）生成逻辑，尤其当段落含 text-indent、line-height 较大，或第一行刚好落在浮动形状顶部时，浏览器可能把首行当作“浮动影响区”而跳过缩进，或强制拉高某几行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免对绕排段落单独设
text-indent；统一用padding-left模拟首行缩进更稳定 -
line-height建议用无单位数值（如1.6），而非px或em，防止与浮动盒高度计算冲突 - 若首行始终异常，可在段落前插入一个空
<span></span>并设clear: both强制新 BFC，但这是权宜之计——真正要检查的是浮动元素是否意外撑开父容器高度
shape-outside 的形状精度和 float 的流式依赖让它对布局上下文极其敏感，哪怕一个未重置的 margin 或隐式 vertical-align 都可能让绕排崩掉。动手前先用 DevTools 的 Layout 面板确认浮动盒的真实尺寸和形状渲染范围，比反复调参数更省时间。
