CSS浮动文字环绕图片技巧

• 图片加 float: left 或 float: right，并配 margin 预留间隙（如 margin-right: 12px）
• 文字用普通

  、

  等标签，**不要给它们设 float 或 clear**

• 如果父容器有宽度限制，确保它足够容纳“图片宽 + 文字最小可用宽度”，否则文字会换行挤到下一行

.article {
  width: 600px;
}
.article img {
  float: left;
  margin-right: 12px;
  width: 180px;
  height: 120px;
}

为什么文字有时不绕行、直接掉到图片下面

最常踩的坑是误用了 clear 或父容器触发了 BFC（块级格式化上下文），强行切断了环绕流。典型场景包括：

• 图片后紧跟一个带 clear: both 的
  ，它会强制换行，且挡住后续所有内容
• 父容器设置了 overflow: hidden、display: flow-root 或 float 自身，导致内部浮动脱离影响范围
• 图片没有显式设置 width 和 height，加载完成前高度为 0，文字先排版完毕，加载后才“顶开”文字（可加 aspect-ratio 或占位样式缓解）

现代替代方案要不要现在就换

float 实现文字环绕依然完全有效，浏览器兼容性覆盖 IE6+，无需担心。CSS Shapes、shape-outside 虽能实现更复杂的绕行（比如绕椭圆），但 Safari 对 SVG 支持不稳定，Firefox 对渐进式图像 shape 计算有延迟，实际项目中反而容易出 layout shift。

除非你明确需要非矩形绕行（比如文字绕 logo 轮廓），否则坚持用 float 更稳。注意一点：别在 Flex 或 Grid 容器里对子项用 float——它们会忽略 float 声明，此时必须退回到普通文档流容器（如 div + display: block）里再用。

本篇关于《CSS浮动文字环绕图片技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！