图文环绕最直接用float，但需处理父容器塌陷；现代推荐float+shape-outside实现非矩形环绕，flex不支持环绕，CSS Containment等性能属性与布局无关。
float 实现图文环绕最直接，但得处理父容器塌陷
用 float 是最老派也最可控的方式，尤其适合文字绕图片左/右的常规排版。但它会让父容器高度塌陷——也就是图片浮起来后，下面的文字块“看不见”它，导致后续内容往上顶。
常见错误现象：margin-bottom 失效、背景色没包住图片、相邻区块错位。
- 给图片加
float: left或float: right - 在图文块末尾加一个带
clear: both的空元素（比如<div style="clear:both"></div>） - 更现代的做法是给父容器设
overflow: hidden或display: flow-root（后者兼容性稍弱，但语义更干净）
flex 布局不能直接图文环绕，别硬套
flex 本质是线性排列容器，它不支持“文字流绕过子项”这种行为。强行用 flex + wrap 搞图文环绕，结果往往是文字断行错乱、首行缩进失效、甚至整段换行异常。
使用场景：适合做图+标题+摘要这类结构化卡片，但不是图文混排。
立即学习“前端免费学习笔记（深入）”；
- 如果只是想让图片和文字并排显示（非环绕），
display: flex完全可以 - 如果真要环绕，请放弃
flex，回到float或shape-outside -
flex-wrap: wrap对文字流无影响，它只作用于 flex item 之间的换行
shape-outside 需配合 float，且只对文本生效
shape-outside 是唯一能实现非矩形环绕（比如圆形、多边形图片边缘绕字）的 CSS 属性，但它必须和 float 一起用，而且只影响**同一 BFC 内的内联内容（即文字）**，对块级元素无效。
容易踩的坑：shape-outside 设了但没反应——八成是忘了加 float，或者父容器触发了新的 BFC 把文字流隔开了。
- 图片必须有
float: left或right - 推荐用
shape-outside: circle(50%)配合border-radius: 50%实现圆形环绕 - 路径类值（如
shape-outside: url(mask.svg)）需注意跨域和 MIME 类型限制 - 性能上，复杂
shape-outside路径可能触发频繁重排，慎用于长文首屏
现代方案：CSS Containment 和 content-visibility 不解决环绕问题
有人看到 contain: layout style paint 或 content-visibility: auto 就想试试图文环绕——它们完全无关。这两个属性是为**性能隔离**设计的，用来跳过不可见区域的渲染计算，对文字流布局零影响。
错误使用后果：文字突然截断、浮动失效、shape-outside 计算错位。
- 别把性能优化属性和布局属性混用
- 需要环绕，就老实用
float+shape-outside组合 - 真正要注意的是：所有环绕效果都依赖文字处于同一个格式化上下文（BFC），父容器的
overflow、display、position都可能意外切断它
图文环绕看着简单，实际卡点都在 BFC 边界和 float 的隐式依赖上。哪怕只是换了个 wrapper 的 display 值，也可能让绕字整个消失——这时候先查 float 是否生效，再看父容器有没有无意中创建新 BFC。
