shape-outside失效时文字“塌陷”是因旧浏览器忽略该属性且不回退到矩形浮动，必须先声明float作为降级基础，并确保其与shape-outside同选择器、float在前，同时设置明确宽高和margin以保障基础环绕。
shape-outside 失效时文字直接“塌”下来，不是没样式，是布局逻辑断了
旧浏览器（IE、Edge ≤17、Firefox 未开启实验标志）遇到 shape-outside 会直接忽略该声明，但**不会回退到矩形浮动行为**——而是彻底取消文字环绕能力。结果就是文字从浮动元素正下方穿过，像它根本没浮动一样。这不是渲染异常，是 CSS Shapes 规范明确规定的“不支持即不参与排版”，所以必须靠 float 自身撑住基础布局。
必须把 float 写在最外层，且不能依赖 @supports 包裹
float: left 或 float: right 是唯一能触发文字环绕上下文的锚点，它得先存在、稳存在。否则 @supports (shape-outside: circle()) 里再怎么写增强样式也无从依附。
- 所有使用环绕效果的元素，第一行 CSS 就该是
float: left（或 right），哪怕只是占位 -
shape-outside必须和float在同一个选择器里，且写在float后面（语义上强调依赖） - 别在
@supports块里重复写float，那会导致旧浏览器因不识别@supports而连基础浮动都丢失 - 给浮动元素设明确
width和height（百分比在降级后易出错，优先用 px 或 rem）
降级后文字贴边/错位？重点查 margin 和尺寸对齐
纯 float 下没有 shape-margin，文字会紧贴矩形右边缘；若此时视觉上还“错位”，大概率是基础浮动的留白没配好。
- 检查是否漏了
margin-right（对float: left）或margin-left（对float: right）——这是降级后控制文字距离的唯一手段 - 确认浮动元素宽高与内容匹配：比如
img没设width，浏览器按原始尺寸浮动，但父容器可能约束了宽度，造成文字流计算混乱 - 避免用
overflow: hidden包裹浮动元素，它会意外清除浮动上下文，让降级后的float也失效 - 文字容器必须是普通流块级元素（
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）"><img src="https://img.php.cn/upload/skill/000/000/081/179196125775037.jpg" alt="page-agent 浏览器控制（CDP）" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）">page-agent 浏览器控制（CDP）</a> <p>使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。</p> </div> <a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<div>），不能是 <code>display: flex或display: grid，否则整个环绕逻辑被切断Firefox 用户看到矩形环绕？不是 bug，是默认禁用 shape-margin
Firefox ≥111 支持
shape-outside，但shape-margin和url()形状解析默认关闭。用户双击打开 HTML 或本地服务没配 CORS 时，shape-outside: url(logo.png)几乎必静默失败，文字退回到矩形浮动——这和 IE 完全不识别是两回事。立即学习“前端免费学习笔记（深入）”；
- 开发调试时，在地址栏输入
about:config，启用layout.css.shape-outside.enabled和layout.css.shape-margin.enabled - 生产环境不能依赖用户开 flag，应优先用
polygon()替代url()，比如shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%)至少保证一个矩形轮廓可被识别 - 若必须用图像形状，改用内联 SVG 路径：
shape-outside: url(#myPath)，并确保<svg></svg>在 HTML 中内联、<path></path>坐标适配元素尺寸
真正难处理的不是
shape-outside本身，而是当它失效时，你有没有为float预留足够的容错空间：明确的尺寸、可控的 margin、干净的布局上下文。一旦这些没对齐，降级就不是“退一步”，而是“掉一层”。 - 开发调试时，在地址栏输入
