shape-outside必须与float同时使用才生效，缺一则无效；需配合width、height、display:block，并确保父容器未创建BFC（如flex/grid/overflow:hidden），否则文字不环绕。
shape-outside 必须和 float 同时存在，缺一不可
浏览器根本不会去解析
，除非元素明确参与了浮动上下文。它不是“增强型 float”，而是“float 的形状扩展”。没有
或
，
就是无效声明——DevTools 里会直接显示为 strike-through（划掉），且不触发任何布局计算。
常见错误现象：
文字直穿图片下方，像没设浮动一样
图片位置正常，但文字完全无视形状，紧贴矩形右边缘
用
检测通过，但实际没效果——说明降级逻辑没兜住，基础 float 缺失
必须同步设置的最小组合：
立即学习
“
前端免费学习笔记（深入）
”；
（或
）
和
（
需要参考尺寸，百分比值基于自身盒模型）
（避免
默认的
行内行为干扰基线对齐）
父容器用了 flex 或 grid，shape-outside 就失效
CSS Grid 和 Flex 容器会强制子项脱离常规文档流，浮动机制被“静默降级”：元素视觉上还在那儿，但已不参与文本流排布，
失去作用对象。这不是 bug，是规范行为。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
检查点：
目标元素的父级是否写了
或
？如果是，必须把该元素移出容器，或改用绝对定位 + 手动留白（但失去自动环绕能力）
有没有意外触发 BFC？比如父容器设置了
、
或
，这些都会裁剪浮动区域，导致形状“不可见”
文字内容是否在同一个块格式化上下文中？如果前面有
，文字会跳过整个浮动区，根本不进入环绕逻辑
shape-outside 只影响块级流中的内联内容
它不控制绝对定位、
移动过的文字，也不绕过
的裁剪边界。更关键的是：它只对后续的**块级容器内的行框（line boxes）** 生效，对单独的
、
等行内元素无感。
典型误用场景：
给一个
shape-outsidefloat: leftfloat: rightshape-outside@supportsfloat: leftrightwidthheightcircle(50%)display: blockinlineshape-outsidedisplay: flexdisplay: gridoverflow: hiddencontain: layoutdisplay: flow-rootclear: bothtransformoverflow: hidden
设了
shape-outside
，但里面文字是
position: absolute
布局 → 不绕
文字容器本身是
display: flex
→ 行框不生成，环绕失效
用
clip-path
裁剪了图片，但忘了
shape-outside
是另一套路径，两者不联动 → 视觉圆 ≠ 文字绕圆
最容易被忽略的一点：shape-outside 的形状路径，始终以元素自身的 border-box 为坐标系原点；它不随父容器缩放、不响应 transform，也不受 margin 影响——想调文字起始环绕位置，得靠
margin-top
或
shape-margin
，而不是移动原点。