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