shape-outside只对float元素生效，因CSS规范限定其仅作用于浮动上下文；需同时满足float声明、非inline显示、明确宽高、父容器无overflow:hidden等四条件，缺一则静默失效。
shape-outside 为什么只认 float 元素
因为 CSS 规范明确限定 shape-outside 只作用于参与浮动上下文（float context）的元素——它不是“给任意块加个形状就能绕”，而是专为 float: left 或 float: right 设计的排版机制。浏览器渲染时，只有浮动元素会触发后续内联内容（比如段落里的文字）重新计算行框（line boxes）边界，shape-outside 提供的就是这个新边界。非浮动元素（哪怕 display: block）不产生浮动流，文字自然按矩形盒模型直通而过。
哪些 display 值会让 shape-outside 直接失效
shape-outside 要求元素既得是浮动的，又得是块级或行内块级；以下情况会被忽略：
-
display: inline（如默认span）—— 不支持宽高，无法锚定坐标系 -
display: table-cell（如<td>）—— 表格布局强制脱离文本流，float声明被浏览器重置，shape-outside显示为 “ignored” -
display: flex或display: grid容器子项 —— 即使手动加float，也因父容器 BFC 阻断浮动传播而无效 -
position: absolute/fixed—— 完全脱离文档流，不参与文字流排版，shape-outside计算值直接退化为none
为什么加了 float 还没反应？四个硬性条件缺一不可
就算写了 float: left，shape-outside 仍可能静默失效。必须同时满足：
-
float: left或float: right（float: none或未声明 = 无效） -
display不是inline（推荐显式设display: block） - 有明确宽高：
width和height，或用aspect-ratio固定比例；否则polygon()坐标无基准 - 父容器不能含
overflow: hidden、contain: layout或display: flow-root—— 这些会裁剪浮动区域，让形状轮廓“不可见”
调试时最该看的两件事
别只盯着 CSS 写没写对，先验证底层是否生效：
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 的 computed 样式里查
shape-outside值：如果显示为none（不是你写的值），说明浮动上下文根本没建立 - 临时加
outline: 1px solid red和background: rgba(0,0,0,0.1)，确认浮动元素真实尺寸和位置是否符合预期；很多“没绕”其实是图被拉伸/缩放，导致polygon()坐标错位
真正难调的不是语法，而是浮动区域高度塌陷、响应式缩放后形状失准，以及 Safari 对 url() 和 path() 的兼容性断层——这些不会报错，但文字就是不绕。
