在網頁設計中，圖文繞排是一種常見的設計技巧。它可以讓文字與圖片完美結合，增加頁面的美觀程度和閱讀體驗。實現圖文繞排需要用到CSS的相關屬性進行布局。接下來，我們將介紹如何使用CSS實現圖文繞排。

.img-wrapper{
float:left;
margin: 10px 10px 10px 0;
}
.text-wrapper{
margin: 10px;
}
.clearfix{
clear:both;
}

首先，在CSS中我們需要定義圖片和文字分別封裝在兩個容器中，如上述代碼所示，圖片容器的class名為img-wrapper，文字容器的class名為text-wrapper。

在圖片容器中，我們需要設置float:left屬性，使圖片向左浮動。同時設置margin屬性來調整圖片和文字之間的間距。

在文字容器中，我們同樣設置margin屬性來調整文字和圖片之間的間距。

由于浮動元素會導致容器高度塌陷，所以需要在繞排元素的下方添加一個clearfix類來清除浮動。具體如下：

<div class="img-wrapper">
<img src="image.jpg">
</div>
<div class="text-wrapper">
<p>這里是文字</p>
</div>
<div class="clearfix"></div>

以上是基本的CSS實現圖文繞排的代碼和注意事項，需要注意的是，圖片在容器中應該盡量縮小，以免影響頁面加載速度。