如何使用 HTML 和 CSS 在图像周围环绕文本？

在网页设计中，有时需要在文本的周围环绕一张图片，以丰富页面的视觉效果。我们可以使用 HTML 和 CSS 实现这个效果。

HTML

首先，在 HTML 中插入图片和文本。我们可以将文本放在 <p> 标签中，图片放在 <img> 标签中，像这样：

<p>
  在 HTML 和 CSS 中，我们可以使用以下方法在图片周围环绕文本。
</p>
<img src="example.jpg" alt="示例图片" />
<p>
  环绕文本的效果会让页面更加美观。
</p>

CSS

接下来，我们需要使用 CSS 对图片和文本进行定位和布局。具体来说，可以使用 float 属性使图片浮动在文本左侧或右侧，再使用 margin 属性增加间隔，如下所示：

img {
  float: left;
  margin: 0 10px 10px 0;
}

这段 CSS 代码会使图片向左浮动，右边留出 10 像素的空隙，下方留出 10 像素的空隙。

如果希望图片环绕在文本的周围，而不是只在左侧或右侧浮动，可以使用 shape-outside 属性指定图片周围的形状。例如，假设我们希望图片围绕着一个圆形：

img {
  float: left;
  margin: 0 10px 10px 0;
  shape-outside: circle();
}

以上代码会将图片的形状变为圆形，文本会环绕在圆形外面。

结论

通过 HTML 和 CSS，我们可以轻松地实现图片周围环绕文本的效果。通过调整 CSS 属性，我们还可以控制图片的形状和位置，实现更加复杂的布局效果。