CSS文字環繞圖片是一種常見的網頁排版技巧，可以讓文字圍繞著圖片排列，增強頁面的視覺效果。在實現這一效果的過程中，我們需要了解一些基本的CSS屬性以及其原理。

img {
float: left; /* 圖片左浮動 */
margin: 0 1em 1em 0; /* 圖片與文字之間的邊距 */
}
p {
text-align: justify; /* 文字兩端對齊 */
}
.clearfix::after {
content: "";
display: table;
clear: both; /* 清除浮動 */
}

以上是實現文字環繞圖片的基本CSS代碼，下面我們來解釋一下具體原理。

首先，我們給圖片設置了左浮動，這樣圖片就可以脫離文檔流，使文字可以圍繞圖片排列。接著，我們為圖片添加了一些外邊距，這樣可以讓文字與圖片之間有一定的間隔，防止頁面顯得過于擁擠。

然后，我們為段落添加了text-align屬性，將文字對齊方式設置為兩端對齊。這樣在文字環繞圖片的過程中，文字就可以自動填充空隙，讓頁面顯得更加美觀。

最后，我們為父容器添加了clearfix類，并在其中使用了::after偽元素清除浮動。這是由于圖片浮動可能會導致父容器高度塌陷，使頁面布局混亂。因此，我們需要將父容器的高度自適應，并清除浮動，以保證頁面布局的穩定性。

總的來說，CSS文字環繞圖片的原理就是通過設置圖片的浮動和外邊距，以及給段落添加text-align屬性和清除浮動，實現文字自動圍繞圖片排列。熟悉這些基本的CSS屬性和原理，我們就可以更好地運用這一網頁排版技巧，打造優秀的用戶體驗。