文字只绕第一段而后续段落塌陷，是因为shape-outside仅对同一块格式化上下文内紧接的后续块级流内容生效；父容器触发BFC（如overflow:hidden、display:flex）、段落前存在clear:both或段落脱离同一容器，均会中断浮动传播，导致环绕失效。
为什么文字只绕第一段，后面段落全掉到图片下面？
这不是 shape-outside 失效，而是浮动影响范围被截断了——shape-outside 只对**后续块级流内容**生效，且前提是这些内容能“看到”浮动区域。一旦父容器触发 BFC（比如加了 overflow: hidden），或下一段 <p></p> 前有 clear: both，浮动传播就中断，文字自然塌陷。
- 检查父容器是否意外加了
overflow: hidden、contain: layout或display: flex——这些都会裁剪浮动区，让shape-outside形同虚设 - 确认所有需环绕的段落都在同一个父容器内，且顺序紧接在
<img alt="如何在CSS中实现文字环绕异形图片且不影响后续段落" >之后；不要把第二段<p></p>单独拎到另一个<div> 里<li>绝对不要给后续段落加 <code>clear: both或clear: left/right，它会强制整段跳过浮动区 - 如果必须分隔内容，用
margin-bottom代替clear，并在图片上设margin-bottom: 1em控制与下一段的距离 -
float: left或float: right显式声明（不能靠继承，不能被父容器如display: grid覆盖） -
<img alt="如何在CSS中实现文字环绕异形图片且不影响后续段落" >设为display: block（避免默认inline底部留白干扰对齐） - 明确宽高：用
width+height: auto，或width+aspect-ratio（Safari 15.4+ 支持）；仅max-width: 100%不够 - 父容器必须允许浮动外溢：推荐
overflow: auto（兼容老浏览器）或display: flow-root（语义清晰，现代首选）
float + shape-outside 怎么写才让多段文字都绕？
关键不是改文字，而是稳住浮动传播路径。必须同时满足四个硬性条件，缺一不可：
示例结构：
```css
.article {
display: flow-root; /* 关键：不裁剪浮动，也不塌陷 */
}
.article img {
float: left;
width: 280px;
aspect-ratio: 4/3;
shape-outside: url(logo.svg);
shape-margin: 1em;
margin-right: 1em;
margin-bottom: 1em; /* 控制与下一段间距 */
}
```响应式下多段文字突然不绕了，怎么修？
不是媒体查询没生效，是 shape-outside 的计算基准没重算——polygon(0 0, 100% 0, ...) 中的 100% 指当前 <img alt="如何在CSS中实现文字环绕异形图片且不影响后续段落" > 元素的宽高，而你只改了 width，没重写 shape-outside，浏览器仍按旧尺寸算轮廓，结果偏移严重。
立即学习“前端免费学习笔记（深入）”；
- 每个断点里必须完整重写
shape-outside，不能只调width - 小屏优先用简单形状：比如从
polygon()切换到ellipse(40% 55% at 50% 50%)，比复杂坐标更稳定 - 超小屏（
max-width: 480px）直接关掉：shape-outside: none; float: none;，比留个错位轮廓更稳妥 - 避免在
url()类型中混用 DPR 高分辨率图——压缩+缩放易糊掉 alpha 边缘，导致轮廓识别失败
本地开发时 shape-outside 完全没反应，怎么办？
双击打开 HTML 文件（file:// 协议）下，shape-outside: url(logo.png) 几乎必然静默失效，不是代码问题，是浏览器策略限制。
- 立刻起一个本地服务：
python3 -m http.server 8000，然后访问http://localhost:8000 - 确保 PNG/SVG 有干净 alpha 通道：用图像编辑器检查边缘是否真透明，非半透明抗锯齿像素可能低于默认
shape-image-threshold: 0.5 - 改用内联 SVG 更可靠：
<svg><path id="my-path" d="M0,0 L100,0..."></path></svg>，再写shape-outside: url(#my-path) - DevTools 中选中
<img alt="如何在CSS中实现文字环绕异形图片且不影响后续段落" >，看 Styles 面板里shape-outside是否被划掉（invalid）或显示为none——这是最直接的诊断依据
真正难的不是写出第一个环绕效果，而是让三段文字、两种断点、三种图片格式，在不同浏览器里都保持一致的环绕逻辑——这要求你每次改 width 都同步动 shape-outside，每次加 overflow 都先确认它是否截断浮动，每次本地调试都记得别双击打开文件。
