用 float: left 实现图片左浮动文字环绕最直接兼容，需配 margin-right 预留间距并清除后续浮动；右浮动同理但注意中文阅读习惯与响应式处理；shape-outside 可实现不规则环绕但必须配合 float；display: flow-root 是现代清浮优选方案。
图片左浮动文字环绕怎么写
用 float: left 是最直接、兼容性最好的方式，尤其适合图文混排的新闻或博客类内容。现代布局虽倾向用 display: grid 或 display: flex，但它们不支持真正的文字环绕（即文字绕着图片形状流动），只有 float 能做到这点。
常见错误是忘记清除浮动，导致后续元素错位；或者给图片加了 margin 但没预留文字间距，文字紧贴图片边缘。
-
img元素必须设置float: left，同时建议加上margin-right: 12px（数值按需调整）让文字保持呼吸感 - 文字容器（如
<p></p>）无需额外样式，浏览器会自动绕行 - 浮动后的下一个块级元素（比如另一个
<div>）要加 <code>clear: both，否则可能被“吸”上去 - 如果图片在段落中间，建议把
img放在<p></p>内部，而不是段落外——否则文字不会环绕它 - 用
float: right+margin-left: 12px，注意是margin-left（不是right）来留白 - 移动端需加媒体查询，例如
@media (max-width: 768px) { img { float: none; margin: 0 auto; display: block; } }，否则图片可能跑到文字下方还偏右 - 若图片高度远大于文字行高，下方文字会从图片底部开始排列，看起来像“断层”，此时可加
overflow: hidden到父<p></p>控制截断范围 - 基础写法：
img { float: left; shape-outside: circle(50%); width: 200px; height: 200px; } -
shape-outside不作用于非浮动元素，忘了float就完全无效 - 浏览器支持良好（Chrome/Firefox/Edge ≥ 2015），但 IE 完全不支持，需降级为普通
float - 若用图片做形状，得确保图片本身有 alpha 通道，且用
clip-path配合才能精确控制轮廓 - 给图片的父容器（如
<figure></figure>或<div>）加 <code>display: flow-root，就能避免加伪元素或空标签清浮 - 不要对文字容器设
display: flow-root，否则文字不再环绕，而是整个块被当成一个“框”去排版 - 和
float共存没问题，但别和flex或grid父容器混用——后者会忽略float，文字环绕就失效了
文字环绕本质是浮动流式行为，不是“布局系统”而是“文本流规则”。只要记住：绕图的前提是浮动，清浮的关键是 BFC，而所有花哨形状都逃不开这个底层约束。
图片右浮动文字环绕的坑
右浮动原理相同，但容易出问题：中文阅读习惯从左到右，右浮图片常导致首行文字缩进异常，或小屏幕下图片挤出容器。
用 shape-outside 做不规则环绕
想让文字绕着圆形或自定义路径走？shape-outside 是唯一方案，但它有硬性前提：必须配合 float，且图片需是透明背景 PNG 或 CSS 生成的形状。
现代替代方案：display: flow-root 和清除浮动
浮动带来布局副作用，比如父容器高度塌陷。传统用 clearfix 类，现在更推荐 display: flow-root —— 它让父元素创建新的 BFC，自动包含浮动子元素，且不影响文字环绕逻辑。
