float是唯一真正能绕图的方案，因其让图片脱离标准流却保留对后续文本行盒的排挤能力，使文字自动换行环绕；Flex和Grid无法原生支持该行为，仅实现并排。
float: left 为什么是唯一真正能绕图的方案
Flex 和 Grid 布局只是把图片和文字“并排放”，后续段落不会折行绕到图片下方；只有 float 能让行内内容（包括文字）响应浮动区域并自动换行环绕。这不是历史遗留，而是浏览器渲染引擎对「行内流」的原生支持——float 是目前唯一被所有主流引擎按规范实现该行为的属性。
图文不环绕、文字掉到图片下面的常见原因
这不是 float 失效，而是 HTML 结构或布局上下文没配对：
-
<img>必须写在文字容器（如<p>或同级<div>）的前面，不能后置 - 图片和文字必须共用一个父容器，不能分属不同
<div> - 父容器未触发 BFC：没加
overflow: hidden、display: flow-root或伪元素清除，导致高度塌陷 - 误给文字容器（比如
<p>）设了clear: both，它会强制整段换行，直接打断环绕
margin 加在哪？怎么加才有效
文字是行内流，只响应浮动元素自身的外边距，不响应父容器或文字块的 margin：
- 左浮动图片：加
margin-right: 16px控制右侧文字距离（别写margin: 10px，上下值会顶开相邻段落） - 右浮动图片：加
margin-left: 16px，方向别反 - 多段落时一定要加
margin-bottom: 12px，否则下一段<p>会顶到图片底部，留出大片空白 - 别给图片加
display: block或margin: auto，这会让它脱离行内流，失去环绕能力
响应式下 float 突然崩坏怎么办
固定像素值的 margin 在小屏上容易过挤，而 float 本身不感知容器尺寸变化：
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)中直接移除浮动：float: none、shape-outside: none - 改用
display: block; margin: 0 auto;让图片居中独占一行 - 如果坚持用
shape-outside，所有形状参数必须用百分比（如circle(50% at 50% 50%)）或vmin，且需在每个断点重写整个声明 - 旧版 iOS Safari 和微信 WebView 不支持
shape-outside，检测不到就降级，别硬撑
真正麻烦的不是写 float: left，而是浮动生命周期管理：HTML 顺序是否可控、BFC 是否稳、响应式断点是否覆盖全、屏幕阅读器能否按语义顺序读取——这些都得靠结构验证，不能只盯视觉对齐。
