float是唯一稳定实现文字环绕的方案，需在img上设float:left、显式width和margin-right，且文字必须紧随其后；响应式中须在媒体查询里取消float并加clear:both，否则文字卡位。
只能用 float 实现真环绕，shape-outside 是锦上添花但非必需；响应式下必须在断点里主动取消 float 并加 clear，否则文字卡住不动。
为什么 float:left 能让文字出现在图片右侧
文字绕排不是靠“把图放右边”，而是浏览器把浮动后的 <img> 当作不可穿透的障碍物，段落文字按行内流自动填满它右侧和下方的空间。这个机制只对处于同一 BFC 中的后续文本生效。
-
float: left必须写在<img>标签上，不能写在父容器或<p>上 -
<img>必须出现在 HTML 流中文字内容之前，否则文字没机会“绕” - 图片默认是行内级，别加
display: block或margin: auto，否则脱离文本流，环绕失效 - 常见错误：父容器用了
display: flex或overflow: hidden—— 这会创建新 BFC，直接切断环绕上下文
响应式断点里必须重置 float 和 clear
小屏强行图文并列，文字挤成细条，阅读效率暴跌。响应式不是让绕排更小，而是主动退回到“图上文下”结构。
- 在
@media (max-width: 600px)中设img { float: none; display: block; margin: 0 auto; } - 必须同步给后续段落加
clear: both，例如：<p style="clear: both">这段文字一定从下一行开始</p> - 别只在媒体查询里取消
float却忘了clear—— 图片归位了，但文字还卡在老位置不动 - 如果图片后紧跟的是
<div>而非<p>，也要确保该<div>有clear: both，否则环绕延续到下一段
width 和 margin-right 缺一不可
只写 max-width: 100% 不够，加载时占位塌陷会导致文字先绕错再重排闪动；不设 margin-right 则文字紧贴图片边缘，可读性差。
立即学习“前端免费学习笔记（深入）”；
- 推荐显式宽度：
width: 200px、width: 30vw，或配合aspect-ratio: 4/3（Safari 15.4+ 支持） -
margin-right: 1rem或margin-right: 12px留出合理间隙，避免视觉粘连 - 别单独设
height——float布局依赖宽度触发文本重排，高度由height: auto自动维持比例 - 父容器若无明确宽度（比如
width: 100%但外层是flex），max-width: 100%可能失效，优先用固定值或视口单位
shape-outside 在响应式中极易失效
shape-outside 不是 float 的替代方案，而是叠加修饰——它只对已浮动且尺寸明确的元素生效，且默认基于原始尺寸计算，不随缩放自适应。
- 必须同时满足：
float: left+ 明确width和height（或aspect-ratio）+ 父容器未创建新 BFC -
shape-outside: circle(50%)在图片缩小后仍按原始宽算半径，iOS Safari 下文字常“跳”到正下方 -
shape-outside: url("mask.png")在file://协议下必失败，需 HTTP 服务 + CORS 响应头；PNG alpha 通道要干净，无抗锯齿毛边 - 调试时加
outline: 1px solid red看真实盒模型，Chrome DevTools “Layout” 面板勾选 “Show shape outlines” 查轮廓是否对齐
真正容易被忽略的是：浮动本身没问题，但一旦父容器创建新 BFC（比如加了 overflow: hidden 或用了 flex），环绕就立刻中断——这不是代码写错了，是布局上下文被硬性隔离了。
