如何用CSS实现非Flex布局的文本环绕图片效果？

本文共计1042个文字，预计阅读时间需要5分钟。

当需要让文字自然绕排在图片左右时，可以使用以下方法：

常见错误是给图片加了 float 却忘了清除浮动，导致后续段落塌陷或错位。尤其在 CMS 或富文本编辑器输出的 HTML 中，<p> 和 <img> 混排时极易出问题。

• 图片必须设置明确宽度（如 width: 200px），否则 float 在某些浏览器中可能失效或表现异常
• 文字容器无需额外样式，但建议给图片加 margin（如 margin: 0 16px 8px 0）避免贴边难读
• 父容器末尾需清除浮动：可用 ::after 伪元素 + clear: both，或临时加 <div style="clear:both"></div>

为什么 Flex 布局不适合做真正的文本环绕

display: flex 会让子元素脱离常规文本流，所有子项（包括图片和文字容器）都变成弹性项目，文字无法“绕”着图片走，只能并排或上下堆叠——这本质是布局分区，不是环绕。

典型误用场景：把 <img> 和一个 <p> 放进 flex 容器，指望文字自动折行绕图。结果是文字被压缩成窄列，或溢出、换行失控，尤其在响应式断点下更难控制。