有多种方法可以实现文字环绕图片的效果，以下是几种常见且有效的布局方案，并附带代码示例：
1. 使用 float 属性:
这是最常用的方法，简单易懂。
<div class="container">
<img src="image.jpg" alt="Image" class="float-left">
<p>这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。</p>
</div>
<style>
.container {
overflow: hidden; /* 清除浮动 */
}
.float-left {
float: left;
margin-right: 10px; /* 图片右侧的间距 */
}
</style>
float: left;: 使图片浮动到左侧。margin-right: 10px;: 设置图片右侧的间距，以与文字分隔。overflow: hidden;: 清除浮动，防止父元素塌陷。 也可以使用其他清除浮动的方法，例如 clearfix。
2. 使用 shape-outside 属性 (CSS Shapes):
shape-outside 属性允许你使用更复杂的形状来包裹文字。 这需要浏览器支持 CSS Shapes。
<div class="container">
<img src="image.jpg" alt="Image" class="shape-image">
<p>这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。</p>
</div>
<style>
.container {
overflow: hidden;
}
.shape-image {
float: left;
shape-outside: url("image.jpg"); /* 使用图片本身的形状 */
clip-path: url("image.jpg"); /* 可选择: 如果图片有透明部分，使用clip-path */
margin-right: 10px;
}
</style>
shape-outside: url("image.jpg");: 使用图片的形状作为环绕路径。clip-path: url("image.jpg");: 如果图片有透明区域，这将确保文字不会环绕在透明区域内。
3. 使用 Flexbox:
Flexbox 也可以实现文字环绕效果，但不如 float 和 shape-outside 灵活。
<div class="container">
<img src="image.jpg" alt="Image">
<p>这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。这是一些环绕在图片周围的文字。</p>
</div>
<style>
.container {
display: flex;
}
img {
margin-right: 10px;
}
</style>
这种方法适合图片和文字都在同一行的情况，并且图片高度不会超过文字高度。
4. 使用 Grid 布局:
Grid 布局也可以实现，但通常用于更复杂的布局场景。
选择哪种方法取决于你的具体需求和布局的复杂性。 对于简单的文字环绕图片效果，float 方法是最常用和最容易实现的。 如果需要更精细的控制，shape-outside 是一个强大的工具。 Flexbox 和 Grid 更适合复杂的布局，而不仅仅是文字环绕图片。
记住替换 image.jpg 为你实际的图片路径。 根据你的设计需求调整 margin 值。