在网页排版中，图片环绕文字是一种常见布局。使用纯CSS完全可以做到，不需要写一行JavaScript。其原理是借助浮动特性，让图片脱离普通文档流的常规位置，文字内容则围绕它排列。
一、核心属性 float
实现环绕效果最关键的是 float 属性。当给图片设置 float: left 或 float: right 后，图片会向对应方向浮动，后面的文字块会自动填满剩余空间并包裹图片。
基础示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片环绕文字</title>
<style>
.wrap {
width: 600px;
line-height: 1.8;
}
.wrap img {
float: left; /* 图片向左浮动 */
margin: 0 12px 12px 0;
width: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="https://picsum.photos/200/200?random=2" alt="示例图">
<p>这是一段示例文字，用来展示文字如何围绕浮动的图片进行排列。浏览器在渲染时会把图片拿出正常流，文字围绕其边缘显示，从而形成常见的图文混排效果。</p>
<p>继续补充一些内容，让段落更长，以便清楚看到多行文字在图片右侧及下方自然环绕的状态，这也说明纯CSS处理此类布局非常直观。</p>
</div>
</body>
</html>
二、清除浮动的影响
浮动元素会影响父容器高度计算。若父容器没有设置高度，可能出现高度塌陷。可用 overflow: hidden 或伪元素清除浮动。
使用伪元素清除
.wrap::after {
content: "";
display: block;
clear: both;
}
三、常用辅助属性
- margin：控制图片与文字间距，避免贴得太紧。
- shape-outside：现代浏览器支持，可让文字按非矩形环绕图片。
- width：限制图片尺寸，保证文字有足够空间。
四、总结
纯CSS实现图片环绕文字效果并不难。只要理解 float 的工作方式，配合简单的容器样式，就能完成稳定的图文混排。对于大多数内容展示页面，这种方案轻量且兼容性良好。