CSS实现文字环绕图片的效果

在CSS中，可以使用float属性来实现文字环绕图片的效果。以下是一个简单的例子：

HTML代码：

<div class="container">
    <img src="image.jpg" alt="Description of image" class="float-left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus non nibh tristique dictum nec vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec at dui eget nunc tincidunt vestibulum. Integer ut ex id felis aliquet malesuada. Sed a semper leo. Nullam eget odio eu tellus rhoncus convallis. Phasellus id mauris at erat fringilla laoreet. Curabitur consequat libero id augue porttitor, id hendrerit ligula feugiat. Fusce sollicitudin enim non lectus mollis, quis volutpat turpis fermentum. Etiam sit amet mi sed risus lobortis facilisis.</p>
</div>

CSS代码：

.float-left {
    float: left;
    margin-right: 20px;
}

在这个例子中，我们给图片添加了一个float: left;的样式，这样图片就会浮动到左边，而文本则会环绕在图片的右边。同时，我们还给图片添加了一个margin-right: 20px;的样式，这样可以为文本留出一些空间，避免文本紧贴着图片。

注意，使用float属性可能会导致一些布局问题，特别是在响应式设计中。因此，对于更复杂的布局，可能需要考虑使用Flexbox或Grid等现代布局技术。