float 是实现文字环绕图片最轻量、兼容性最好的原生方案，需为图片显式设置 width（或 max-width）和 float，文字必须紧跟其后且处于同一 BFC 中，同时注意父容器坍缩问题。
float 属性让图片“靠边站”，文字自动绕行
直接说结论：float 是实现文字环绕图片最轻量、兼容性最好的原生方案，不需要 Flex 或 Grid，也不依赖额外容器。关键在于把 <img> 设置为 float: left 或 float: right，文字流会自动避开浮动区域，形成环绕效果。
必须给图片加 width 和 clear 以外的显式尺寸
常见错误是只写 float: left 却没设 width，尤其当图片在响应式容器里时，浏览器可能无法确定浮动块宽度，导致文字塌陷或换行异常。
-
<img src="a.jpg" style="float: left; width: 200px; margin-right: 12px;">—— 推荐显式指定width（或max-width），并配margin留白 - 避免仅用
height，因为float布局依赖宽度触发文本重排 - 如果图片是响应式的，用
max-width: 100%; height: auto;配合float，但父容器需有明确宽度上下文
文字内容必须紧跟在浮动图片之后的 HTML 流中
浮动只影响**后续的、处于正常文档流中的块级/行内内容**。如果图片后面是 <div style="clear: both"> 或其他脱离流的元素，环绕就立刻中断。
- 正确结构：
<img><p>这里是环绕的文字…</p> - 错误结构：
<img><div style="overflow: hidden"></div><p>这段文字不会绕图</p>—— 中间那个div虽没清浮，但overflow: hidden创建了新的 BFC，切断了文字与浮动的关联 - 想让多段文字都环绕？确保它们都在同一个 BFC 内，且中间没有
clear或强制新 BFC 的元素
清除浮动后的内容不再环绕，但要注意 clear 的作用范围
clear: left / clear: both 不是“取消浮动”，而是告诉元素：“你不能出现在左侧/两侧浮动元素的旁边”。它只约束自身位置，不影响前面已发生的环绕。
立即学习“前端免费学习笔记（深入）”；
<p style="clear: both">这段文字一定从下一行开始，不绕图</p>- 如果环绕文字本身需要分段对齐（比如首行缩进），别在
p上直接加clear，否则整段都会掉下来；改用::first-line或外层包裹 - 现代项目中，
clear已逐渐被display: flow-root替代——后者更干净，但老浏览器不支持
真正容易被忽略的是：浮动元素脱离文档流后，其父容器高度会坍缩。如果父容器有背景色或边框，你会看到它“包不住”图片。这不是环绕失效，而是布局常识断层——得用 overflow: hidden、display: flow-root 或伪元素 ::after { content: ""; display: table; clear: both; } 来闭合。这个细节不处理，整个视觉效果就垮了一半。
