css中如何让文字包裹图片

CSS中的文本环绕技术使得我们可以让文字围绕在图片周围，大大提高了网页布局的灵活性和美观程度。下面是一些让文字环绕图片的CSS代码示例。
使用float属性
我们可以使用float属性让图片左浮动或右浮动，然后让文字环绕在图片周围。具体代码如下：

css
img {
  float: left; /*或者是right*/
  margin-right: 20px;
} 

html
<p>
  <img src="example.jpg" alt="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p> 

使用shape-outside属性
shape-outside属性使得我们可以为一个元素定义一个非矩形的形状，然后让文本根据这个形状环绕排布。下面是一个例子。

css
img {
  float: left; /*或者是right*/
  shape-outside: circle(50%);
} 

html
<p>
  <img src="example.jpg" alt="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p> 

使用position和z-index属性
我们也可以使用position和z-index属性来控制图片和文本的叠放顺序。具体代码如下：

css
img {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: -1;
} 

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p>
<img src="example.jpg" alt="example"> 

以上是一些让文本环绕图片的CSS代码示例，可以根据需要进行选择使用。