float 是唯一稳定、原生支持文字环绕图片的方案，必须将 float 写在 <img> 标签上并设置明确宽度，且图片需位于文字前；父容器需用 flow-root 或伪元素清除浮动；小屏应退回到图上文下布局。
float 是唯一稳定、原生支持文字环绕图片的方案，其他写法不是真环绕，缩放或加载时必错位。
为什么必须把 float 写在 <img> 上
文字环绕不是靠“把图放右边”，而是浏览器把浮动后的 <img> 当作一个不可穿透的障碍物，段落文字按行内流自动填满它右侧和下方的空间。如果把 float: left 写在父容器或文字 <p> 上，根本不会触发环绕。
- 错误写法：
<div style="float: left"><img src="a.jpg"></div><p>文字</p>—— 文字完全不绕 - 正确写法：
<img src="a.jpg" style="float: left; width: 200px; margin-right: 1rem;"><p>文字紧跟其后</p> -
<img>必须出现在 HTML 流中文字之前，否则文字没机会“绕”
width 不设就塌，max-width: 100% 不是万能解
浮动布局依赖明确宽度触发文本重排。只写 max-width: 100% 而没给基准宽度（比如父容器无宽、或图片未加载），会导致占位塌陷 → 文字先绕错位置 → 图一出来就闪动重排。
- 推荐显式值：
width: 200px、width: 30vw或配合aspect-ratio（Safari 15.4+） - 响应式可用媒体查询分段控制：
@media (max-width: 600px) { img { width: 100%; } } - 别用
height单独撑开，float布局不靠高度计算环绕流
父容器高度坍缩不是 bug，是必须处理的常识
浮动元素脱离文档流，父容器感知不到高度，背景色包不住图、边框“悬空”——这不是样式失效，是机制使然。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥闭合方式：
div { display: flow-root; }（现代标准，IE 不支持） - 兼容老浏览器：
div::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：虽能触发 BFC，但会截断position: absolute子元素 - 绝对不能用
display: flex或display: grid包float图文 —— 浮动直接失效
小屏必须放弃环绕，不是“调小尺寸”就能解决
窄屏强行图文并列，文字挤成细条，阅读效率暴跌。响应式不是让绕排更小，而是主动退回到“图上文下”结构。
- 关键断点建议：
@media (max-width: 600px) { img { float: none; display: block; margin: 0 auto; } } - 别指望
shape-outside在移动端稳定工作：iOS Safari 对 SVG<path>支持极差，本地file://下url()基本失效 - 首行缩进要用
::first-line，别在环绕段落里加clear: both—— 整段都会掉下来
真正容易被忽略的是：浮动本身没问题，但一旦父容器创建新 BFC（比如加了 overflow: hidden 或用了 flex），环绕就立刻中断 —— 这不是代码写错了，是布局上下文被切断了。
