shape-outside 必须搭配 float 才能生效，因浏览器仅对 float: left/right 元素计算其环绕区域；无 float 则完全忽略，属规范强制要求。
shape-outside 本身不响应式，必须和 float + 媒体查询配合才能真正适配不同屏幕；单独用它在小屏上大概率文字错位或直接失效。
为什么 shape-outside 必须搭配 float 才能生效
浏览器只对设置了 float: left 或 float: right 的元素计算 shape-outside 的环绕区域。没设 float，shape-outside 完全被忽略——这不是 bug，是规范强制要求。
-
shape-outside不改变文档流，只“修饰”浮动后留出的文字绕行路径 - Flex/Grid 容器里的图片即使加了
float，也会因父容器触发 BFC 而截断浮动效果 - IE 全系不支持，Safari 对
shape-outside: url()的透明通道识别不稳定，需降级为ellipse()或矩形
响应式中 shape-outside 容易崩的三个点
小屏下文字突然掉到图片下方、环绕距离忽大忽小、甚至整段文字挤成一列，往往不是代码写错，而是这几个细节没控住：
- 图片必须用
width（非max-width）+height: auto，否则缩放后shape-outside的百分比计算基准丢失 -
shape-margin得用em或rem，不能用固定px，否则小屏下间隙过窄影响可读性 - 媒体查询里只改图片尺寸不够，必须同步重置
shape-outside：比如大屏用polygon()，小屏切回ellipse(40% 50% at 50% 50%)
安全可用的最小响应式配置示例
以下组合经 Chrome 120 / Safari 17 / Firefox 125 实测稳定，覆盖主流设备：
img {
float: left;
width: 30%;
height: auto;
shape-outside: ellipse(50% 50% at 50% 50%);
shape-margin: 1em;
}
@media (max-width: 480px) {
img {
float: none;
width: 100%;
shape-outside: none;
}
}
关键点：float: none 不仅是为了取消环绕，更是防止小屏下因浮动残留导致后续段落塌陷；shape-outside: none 比删掉该属性更稳妥，明确告诉浏览器“别算绕排路径”。
真正难的不是写出这十几行 CSS，而是每次改完设计稿，得重新量一遍图片在各断点下的物理宽度、文字容器最小安全宽度、以及 shape-margin 在不同字体大小下的视觉等效值——这些没法靠自动工具推导，只能手动校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
