float 是当前唯一能在所有浏览器中稳定实现文字环绕图片的原生方案，它通过创建“不可穿透轮廓”使文字绕行，但需显式设置 width、留白 margin 和清除浮动，且父容器不能是 Flex/Grid 或 BFC 截断环境。
float 是当前唯一能在所有浏览器中稳定实现文字环绕图片的原生方案，不需要 Flex、Grid 或 JavaScript 补丁。但它不是“把图放旁边”那么简单——错一个条件，文字就直接沉底或卡住不动。
为什么 float: left 反而让文字在图片右边？
文字环绕不是靠图片位置决定方向，而是靠浮动后留下的“不可穿透轮廓”。float: left 让 <img> 脱离文档流，但后续段落仍按行内流逻辑填充它右侧和下方的空白区域。浏览器把它当障碍物，文字自然绕过去。
-
float: right会让文字绕到左边，但容易和 RTL 文本、CMS 默认结构冲突，float: left更稳 -
vertical-align对浮动后的<img>完全无效——它只作用于行内基线，浮动已脱离行内流 - 图片 HTML 必须写在文字元素之前，否则文字根本没机会“绕”
float 不生效的四个高频原因
常见现象：文字没绕、图片下沉、下一段卡在图下方不动。这不是样式写错了，而是布局上下文被切断了。
- 父容器用了
display: flex或display: grid→float基本失效，得换align-self: start+margin模拟 - 父容器设了
overflow: hidden或contain: layout→ 创建新 BFC，把浮动“截断”，文字绕不进去 - 图片只写了
max-width: 100%没设width→ 加载时占位塌陷，文字先绕错位置，图一出来就闪动重排 - 浮动图片后面插了空
<div>、<p></p>或overflow: hidden容器 → 切断文本流，环绕立刻中断
必须写的三样东西：宽度、留白、清除
只写 float: left 是不够的。缺一不可。
立即学习“前端免费学习笔记（深入）”；
-
width必须显式设置，比如width: 200px或width: 30vw；height: auto保比例，别只靠max-width: 100% -
margin-right（左浮动时）或margin-left（右浮动时）留出可读间隙，例如margin-right: 1rem - 清除浮动不能只靠
overflow: hidden—— 它会裁剪溢出内容，且在 Flex/Grid 中可能引发高度截断；推荐用伪元素：container::after { content: ""; display: table; clear: both; }
响应式下别硬撑，小屏直接退回到图上文下
窄屏强行图文并列，文字挤成细条，阅读效率暴跌。这不是适配失败，而是设计选择错误。
- 在
@media (max-width: 600px)中重置：img { float: none; display: block; margin: 0 auto; } - 别用
shape-outside在移动端硬上——Safari 对url()形状支持极差，iOS Safari 基本不可靠 - 如果真要不规则绕排，优先用
circle()或ellipse()，避免 SVG<path>，后者在编辑器里 DOM 重排后极易失效
真正容易被忽略的是：浮动必然导致父容器高度坍缩。背景色包不住图、边框断开、后续元素上移——这些都不是 bug，是 float 的固有行为。不处理这个，整个图文效果就垮了一半。
