CSS shape-outside为什么对非浮动元素无效

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 要求元素既得是浮动的，又得是块级或行内块级；以下情况会被忽略：

1. display: inline（如默认 span）—— 不支持宽高，无法锚定坐标系
2. display: table-cell（如 <td>）—— 表格布局强制脱离文本流，float 声明被浏览器重置，shape-outside 显示为 “ignored”
3. display: flex 或 display: grid 容器子项 —— 即使手动加 float，也因父容器 BFC 阻断浮动传播而无效
4. position: absolute / fixed —— 完全脱离文档流，不参与文字流排版，shape-outside 计算值直接退化为 none

为什么加了 float 还没反应？四个硬性条件缺一不可

就算写了 float: left，shape-outside 仍可能静默失效。必须同时满足：

1. float: left 或 float: right（float: none 或未声明 = 无效）
2. display 不是 inline（推荐显式设 display: block）
3. 有明确宽高：width 和 height，或用 aspect-ratio 固定比例；否则 polygon() 坐标无基准
4. 父容器不能含 overflow: hidden、contain: layout 或 display: flow-root —— 这些会裁剪浮动区域，让形状轮廓“不可见”

调试时最该看的两件事

别只盯着 CSS 写没写对，先验证底层是否生效：

1. 在 DevTools 的 computed 样式里查 shape-outside 值：如果显示为 none（不是你写的值），说明浮动上下文根本没建立
2. 临时加 outline: 1px solid red 和 background: rgba(0,0,0,0.1)，确认浮动元素真实尺寸和位置是否符合预期；很多“没绕”其实是图被拉伸/缩放，导致 polygon() 坐标错位

真正难调的不是语法，而是浮动区域高度塌陷、响应式缩放后形状失准，以及 Safari 对 url() 和 path() 的兼容性断层——这些不会报错，但文字就是不绕。