文字環繞可以使得文本內容圍繞著其他元素（比如圖片或表格）進行排版展示，能夠提高頁面的美觀性和可讀性。下面我們將介紹如何使用CSS來實現文字環繞的效果。 要想使得文字環繞，我們需要一個基礎的HTML結構來展示我們的內容：

<div class="container">
<img src="image.jpg" class="image">
<p>這里是文本內容</p>
</div>

上述代碼展示了一個基礎的HTML結構，有一個包含圖片和文本內容的父級元素`div`，圖片使用`img`標簽展示，文本部分則使用`p`標簽展示。現在我們需要為其添加CSS樣式。 首先，我們需要將圖片浮動到左邊或右邊，使用`float`屬性即可：

.image {
float: left; /* 或是 right */
}

接下來，我們需要為文本部分添加 `margin`，避免文字內容疊在圖片上。由于圖片是浮動元素，因此我們需要為文本部分添加與圖片方向相對的邊距：

.container p {
margin-left: 20px;  /* 如果圖片在左邊，則為向右的左邊距 */
margin-right: 20px; /* 如果圖片在右邊，則為向左的右邊距 */
}

這將分別為文本部分添加一個左邊距或右邊距，目的是將文本部分與圖片分離開來。如果你想要一個更加美觀的效果，還可以為文本部分添加一個`padding`屬性。 如果你想讓文本環繞的更緊密，可以使用`word-wrap`屬性：

.container p {
word-wrap: break-word; /* 將長單詞斷開 */
}

可以看到，使用這些非常簡單的CSS代碼就能夠實現文字環繞的效果。現在你可以根據你的需要自定義各種樣式，創造出更加豐富多彩的頁面了。