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 也失效
• 文字容器必须是普通流块级元素（
  

  page-agent 浏览器控制（CDP）

  使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

  下载
  、
  ），不能是 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)，并确保 在 HTML 中内联、 坐标适配元素尺寸

  真正难处理的不是 shape-outside 本身，而是当它失效时，你有没有为 float 预留足够的容错空间：明确的尺寸、可控的 margin、干净的布局上下文。一旦这些没对齐，降级就不是“退一步”，而是“掉一层”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！