float + 显式 width + margin 是唯一能同时满足文字环绕和响应式断点切换的轻量方案；因仅 float 原生支持文本绕开脱离流的矩形障碍，且兼容 IE8+，而 Flex/Grid 会切断浮动上下文，shape-outside 在响应式中易失效。
直接结论：用 float + 显式 width + margin 是唯一能同时满足“文字环绕”和“响应式断点切换”的轻量方案；Grid/Flex 无法实现真正环绕，shape-outside 在响应式中极易失效。
为什么 float 是当前唯一靠谱选择
文字环绕的本质是让文本流“感知并绕开”一个脱离文档流的矩形障碍物。只有 float 原生支持这个行为，且浏览器兼容性覆盖 IE8+。Flex 和 Grid 容器会切断浮动上下文——哪怕你给 img 加了 float: left，只要父容器是 display: flex 或 display: grid，文字就完全不绕，只会堆在顶部或换行。
-
float不依赖额外容器，HTML 结构干净：<img>写在段落前，文字紧跟其后即可 - 它天然支持媒体查询中“取消浮动+清浮”，响应式切换逻辑清晰、可控
- 所有现代浏览器对
float的环绕计算高度一致，无渲染差异
必须显式设置 width 和 margin
只写 float: left 而不设 width，会导致加载时占位塌陷、文字先绕错位置再重排，出现明显闪动。浏览器需要明确宽度才能触发文本重排计算。
- 响应式场景下，用
max-width: 30vw比width: 100%更安全——它限制最大尺寸，又允许小屏收缩 - 必须配
margin-right: 1rem（或类似值），否则文字紧贴图片边缘，可读性差 - 禁用
display: block或margin: auto：它们会让img脱离行内流，环绕立即失效
响应式断点里取消浮动必须同步 clear
常见错误：在 @media (max-width: 768px) 中把 img 的 float 改成 none，但没处理后续文字。结果小屏下图片归位了，文字还卡在原来绕行的位置不动，整段悬浮在空中。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是在取消浮动的同时，给**第一个后续段落**加
clear: both：<p style="clear: both">这段文字才从新行开始</p> - 别在浮动图所在的同一段落里加
clear，否则整段文字都会掉到图下方 - 如果用 JS 动态插入内容，记得检查新
<p>是否被自动包裹进有overflow: hidden的容器——那会创建新 BFC，再次切断环绕
父容器不能创建新 BFC
90% 的“文字没绕、图片沉底、后续段落卡住”问题，根源不在 img 样式，而在父容器“关住了”浮动上下文。
- 禁用
overflow: hidden、overflow: auto、contain: layout：它们都会创建新块级格式化上下文（BFC），把浮动锁死在内部，文字流绕不进去 - 禁用
display: flex或display: grid作为图片父容器：同上，浮动失效 - 避免把
<img>包在<div style="display: block">里：这层div切断了img与段落的行内流关系，文字根本感知不到它的存在
真正容易被忽略的是：浮动元素脱离文档流后，父容器高度会坍缩。如果你看到背景色没包住图、边框断开，不是环绕失败，而是忘了闭合浮动——得用 overflow: hidden（仅用于闭合，非布局）、display: flow-root（现代推荐）或伪元素清除法。这点不处理，视觉上整个混排就垮了一半。
