float实现文字环绕需配清除浮动和尺寸控制，否则文字下移；shape-outside须配合float生效，且响应式下需移除浮动并注意性能影响。
直接用 float 就能实现文字环绕图片，但必须配好清除浮动和尺寸控制，否则文字会“掉到图片下面”或撑乱后续内容。
为什么 float:left 后文字没绕上去？
常见现象是图片浮左了，但文字还是从下一行开始——这通常是因为：
- 父容器没给定明确宽度，导致浮动区域计算异常
- 图片没有设置
width或用了max-width: 100%却漏了height: auto，缩放后比例错乱、高度塌陷 - 文字所在的
p或div是块级元素且未触发 BFC，被浮动“穿透”了
解决办法：给图片加固定宽高（如 width: 180px; height: auto;），并在父容器上加 overflow: hidden 或使用 clearfix 类。
shape-outside 要配合 float 才生效
shape-outside 不能单独用，它只对已浮动的元素起作用。想让文字沿圆形边缘走，得这么写：
img.circle-wrap {
float: left;
width: 160px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
}
注意三点：
-
shape-outside: circle()的半径默认基于元素盒模型，不是图片实际内容；加border-radius: 50%是为了视觉匹配 -
shape-margin控制文字与形状边界的空隙，不设的话文字可能紧贴轮廓，可读性差 - Chrome DevTools 的 “Layout” 面板里可以点开
shape-outside实时拖拽调整，比猜数值快得多
响应式下浮动突然失效？检查媒体查询里的 float 重置
小屏时你可能写了 @media (max-width: 768px) { img { float: none; } }，但忘了同步处理：
- 原先靠
clear: both分隔的段落，现在因浮动取消而堆叠错位 - 父容器若还挂着
overflow: hidden，可能意外裁剪内容 - 图片本身如果用了
max-width: 100%却没设height: auto，在窄屏下会被压扁，导致shape-outside计算偏移
建议小屏直接移除所有浮动相关样式，并用 display: block; margin: 0 auto; 让图片居中独占一行。
真正容易被忽略的是：浮动 + shape-outside 在长文首屏大量使用时，可能触发频繁重排（尤其是 polygon() 或 url() 形状），性能敏感场景要节制。别为了一个酷炫轮廓，让首屏渲染慢半秒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
