css中文字围绕图片代码

CSS中文字围绕图片是一个常见的布局需求，在实现这个布局时，我们需要利用CSS中的以下属性：

 .image-container {
        float: left; /* 图片浮动在左侧 */
        margin: 0 20px 20px 0; /* 通过margin控制文字与图片的间距 */
    }

    .text-container {
        overflow: hidden; /* 清除浮动 */
    } 

以上代码中，.image-container和.text-container是两个容器，其中.image-container用于包含图片，通过设置float属性使其浮动在左侧，并通过margin控制其与后面的文本之间的距离；.text-container用于包含文字，通过设置overflow属性清除浮动。

接下来，让我们来看一下完整的HTML和CSS代码：

 <div class="container">
        <div class="image-container">
            <img src="example.jpg" alt="Example">
        </div>
        <div class="text-container">
            <p>这是一段文本，用于演示CSS中文字围绕图片的布局效果。</p>
            <p>这是另一段文本，跟前面的文本在同一个容器中。</p>
        </div>
    </div>

    .image-container {
        float: left;
        margin: 0 20px 20px 0;
    }

    .text-container {
        overflow: hidden;
    } 

通过以上的代码，我们就可以实现文字围绕图片的布局效果了。