shape-outside 失效时文字不退回矩形环绕，因其仅修饰已有浮动上下文，不提供默认浮动；必须前置声明 float 且显式设 display: block，禁用 overflow: hidden 包裹，降级后靠 margin 和明确宽高控制排版。

因为 shape-outside 本身不触发浮动，旧浏览器（IE、Edge ≤17、Firefox 未开启实验标志）直接忽略该声明，且**不会回退到矩形浮动行为**——文字就“塌”到浮动元素正下方，布局逻辑彻底断裂。

shape-outside 失效时，为什么文字不退回矩形环绕？

这不是 bug，是 CSS Shapes 规范的明确设计：shape-outside 仅修饰已存在的浮动上下文，它不是浮动的替代品。一旦浏览器不支持该属性，就会跳过整个形状计算，但也不会自动补上 float 的默认矩形排版能力。结果就是：有 float 才有基础环绕；没 float，连矩形都保不住。

必须写在最前面的 float 声明怎么写才安全？

float 必须作为默认样式存在，不能藏在 @supports 里，也不能靠 JS 动态加。否则旧浏览器因不识别 @supports 或执行时机问题，连基础浮动都会丢失。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• float: left 或 float: right 要写在选择器第一行，且不能被后续规则覆盖（比如 float: none）
• 必须和 shape-outside 在同一个选择器内，顺序为 float 在前、shape-outside 在后
• 浮动元素需显式设 display: block（尤其对 <img>，避免 inline 行内行为干扰）
• 禁用 overflow: hidden 包裹父容器，否则会意外清除浮动上下文

旧浏览器里文字“贴边错位”，其实是哪几个值没配好？

降级后只剩 float，shape-margin 和 shape-image-threshold 全无效，控制文字距离的唯一手段只剩 margin 和尺寸本身。

• 对 float: left，必须设 margin-right；对 float: right，必须设 margin-left
• 浮动元素宽高必须明确（推荐用 px 或 rem），百分比在降级后易导致文字流计算混乱
• 图片若未设 width，浏览器按原始尺寸浮动，而父容器可能约束了宽度，造成文字“穿图而过”
• 别指望 clip-path 或 border-radius 能影响文字路径——它们只改视觉，不改 shape-outside 的降级基准

最容易被忽略的一点：shape-outside 的生效前提是浮动上下文完整存在，而这个上下文在 flex/grid 容器、contain: layout、甚至某些 Vue/React 默认 wrapper 中，会被静默切断——此时连 float 都不工作，更别说形状了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！