在網頁設計中，圖片是頁面元素之一，但是當圖片和文字共存時，我們希望圖片能夠在文字中自然地融入，而不是像一個單獨的組件對待。CSS 里的文字環繞圖片，也就是所謂的“文字段落畫環繞”功能，就是幫助我們實現這種效果的。

img {
float: left; /* 圖片向左浮動 */
margin: 10px 20px 10px 0; /* 與文字之間留有一定的間距 */
}
p {
text-align: justify; /* 文字兩端對齊 */
}
.clearfix::after {
content: "";
clear: both; /* 清除浮動影響 */
display: block;
height: 0;
}

如上面的代碼所示，我們首先為圖片設置了 float 屬性，讓它向左浮動，這樣文字就可以在右側環繞圖片。接著我們為文字設定了 text-align: justify 屬性，使得文字兩端對齊，這樣可以更加美觀。最后，我們需要清除圖片對后面布局的影響，這里使用了 clearfix 技巧，通過在元素的 ::after 偽元素上加上 clear: both 屬性使得浮動效果被清除。

在 html 中，我們只需要將文字和圖片放在共同的父元素內，并給父元素加上 clearfix 類，即可實現文字圍繞圖片的效果：

<div class="clearfix">
<img src="example.jpg">
<p>這里是圖片附帶的文本，圖片與文字共存</p>
</div>

雖然 CSS 里的文字環繞圖片技巧比較簡單，但在實際的網頁設計中卻能夠起到巨大的作用，使得頁面看起來更加美觀與和諧。