shape-outside必须与float同时使用才生效，缺一则无效；需配合width、height、display:block，并确保父容器未创建BFC（如flex/grid/overflow:hidden），否则文字不环绕。
shape-outside 必须和 float 同时存在，缺一不可
浏览器根本不会去解析 shape-outside，除非元素明确参与了浮动上下文。它不是“增强型 float”，而是“float 的形状扩展”。没有 float: left 或 float: right，shape-outside 就是无效声明——DevTools 里会直接显示为 strike-through（划掉），且不触发任何布局计算。
常见错误现象：
- 文字直穿图片下方，像没设浮动一样
- 图片位置正常，但文字完全无视形状，紧贴矩形右边缘
- 用
@supports检测通过，但实际没效果——说明降级逻辑没兜住，基础 float 缺失
必须同步设置的最小组合：
-
float: left（或right） -
width和height（circle(50%)需要参考尺寸，百分比值基于自身盒模型） -
display: block（避免<img>默认的inline行内行为干扰基线对齐）
父容器用了 flex 或 grid，shape-outside 就失效
CSS Grid 和 Flex 容器会强制子项脱离常规文档流，浮动机制被“静默降级”：元素视觉上还在那儿，但已不参与文本流排布，shape-outside 失去作用对象。这不是 bug，是规范行为。
检查点：
- 目标元素的父级是否写了
display: flex或display: grid？如果是，必须把该元素移出容器，或改用绝对定位 + 手动留白（但失去自动环绕能力） - 有没有意外触发 BFC？比如父容器设置了
overflow: hidden、contain: layout或display: flow-root，这些都会裁剪浮动区域，导致形状“不可见” - 文字内容是否在同一个块格式化上下文中？如果前面有
clear: both，文字会跳过整个浮动区，根本不进入环绕逻辑
shape-outside 只影响块级流中的内联内容
它不控制绝对定位、transform 移动过的文字，也不绕过 overflow: hidden 的裁剪边界。更关键的是：它只对后续的**块级容器内的行框（line boxes）** 生效，对单独的 <span></span>、<em></em> 等行内元素无感。
典型误用场景：
- 给一个
<div> 设了 <code>shape-outside，但里面文字是position: absolute布局 → 不绕 - 文字容器本身是
display: flex→ 行框不生成，环绕失效 - 用
clip-path裁剪了图片，但忘了shape-outside是另一套路径，两者不联动 → 视觉圆 ≠ 文字绕圆
最容易被忽略的一点：shape-outside 的形状路径，始终以元素自身的 border-box 为坐标系原点；它不随父容器缩放、不响应 transform，也不受 margin 影响——想调文字起始环绕位置，得靠 margin-top 或 shape-margin，而不是移动原点。
