float是唯一无需js且兼容性最好的原生文字环绕方案，但需同时满足四条件：图片html顺序在文字前、显式设置float与width/max-width、父容器非flex/grid、图文同属一个bfc。
float 是目前最轻量、兼容性最好、且无需 JavaScript 就能实现文字环绕图片的原生方案，但必须满足四个硬性条件：图片在 HTML 中位于文字之前、显式设置 float 和 width（或 max-width）、父容器不能是 display: flex 或 display: grid、文字内容必须处于同一 BFC 内。缺一不可。
图片必须写在文字前面，HTML 顺序决定能否环绕
浏览器按 HTML 流式顺序渲染，float 只影响它之后的块级/行内内容。如果 <img> 放在 <p></p> 后面，文字早已完成流式排布，根本不会“回头”绕图。
- ✅ 正确：
<img src="a.jpg" style="max-width:90%"><p>这段文字会从右边开始环绕</p> - ❌ 错误：
<p>文字已渲染完毕</p> <img src="a.jpg" style="max-width:90%">→ 文字完全不绕 - CMS 或富文本输出不可控时，别强改 CSS，应改用
shape-outside或把图文包进display: grid容器做显式定位
必须设 width（或 max-width）和方向性 margin
float 布局依赖宽度触发文本重排。只写 float: left 却没设宽，尤其在响应式容器里，浏览器可能无法确定浮动块尺寸，导致文字塌陷或换行异常。
- 左浮动图片必须加
margin-right（如12px），右浮动必须加margin-left；加错方向等于白调 - 推荐显式指定
width: 200px，或用max-width: 100%; height: auto;配合父容器有明确宽度上下文 - 避免仅用
height，也别用width: 100%—— 浮动元素需有确定宽度，否则可能撑满父容器 - 记得加
margin-bottom（如12px），否则下一段文字会顶到图片底部，留出大片空白
父容器高度坍缩必须处理，否则背景/边框“包不住”图片
float 让图片脱离文档流，父容器计算高度时直接忽略它。这不是环绕失效，而是布局常识断层 —— 你会看到边框断掉、背景色消失、后续段落顶上来。
- 稳妥解法：用伪元素清除浮动，例如
.wrap::after { content: ""; display: table; clear: both; } - 轻量解法：给父容器加
overflow: hidden（兼容 IE8+），但注意它会意外裁剪溢出内容 - ❌ 别在下一个
<p></p>上写clear: both—— 它只清自己前面的浮动，不帮父容器“撑高” - 现代替代：
display: flow-root更干净，但老浏览器不支持
float 在 Flex/Grid 容器中会直接失效
一旦父容器用了 display: flex 或 display: grid，float 行为被规范明确定义为“忽略”，这不是 bug，是标准行为。此时文字不会绕图，图片可能被拉平成 inline 元素甚至完全失位。
- ✅ 正确结构：父容器用
display: block或默认display: flow-root，子元素用float - ❌ 错误结构：
<section style="display: flex"><img style="max-width:90%"><p>文字</p></section>→ 绕排必然失败 - 若必须用 Flex/Grid 布局，放弃 float 思路，改用
grid-template-columns: auto 1fr模拟左图右文 - 移动端适配时，小屏建议用媒体查询关掉浮动：
@media (max-width: 600px) { img { float: none; display: block; margin: 0 auto; } }
真正容易被忽略的是：float 生效的前提是“图片参与流式布局”。所以别给它加 display: block（它本来就是替换元素）、也别套在 position: absolute 容器里、更别让父容器意外创建 BFC（比如 overflow: hidden 或 display: flex）——这些操作都会直接切断环绕能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
