文字環繞圖片是網頁設計中常用的布局方式，但有時候文字和圖片太過擠在一起，影響了用戶的閱讀體驗。這時候我們可以使用CSS來優化文字環繞圖片的效果。

CSS中有三個屬性可以用來控制文字環繞圖片的樣式，它們分別是float、margin和padding。

img{
float: left; /*將圖片向左浮動*/
margin-right: 20px; /*設置圖片右側距離20像素*/
}
p{
margin: 0; /*去除段落的默認邊距*/
padding: 0; /*去除段落的默認內邊距*/
text-align: justify; /*兩端對齊*/
}

上述CSS代碼中，我們將圖片向左浮動，并且設置了圖片右側距離為20像素。接著，我們重置了段落的默認邊距和內邊距，使文字更加緊湊。同時，我們還使用了text-align屬性將段落兩端對齊，以提高排版效果。

除此之外，我們還可以通過在圖片周圍添加一定的外邊距來增加文字與圖片的間距。

img{
float: left;
margin-right: 20px;
margin-bottom: 20px; /*下方外邊距為20像素*/
}
p{
margin: 0;
padding: 0;
text-align: justify;
}

上述CSS代碼中，我們在圖片下方添加了20像素的外邊距，使得文字和圖片之間有了足夠的空間。

可以看出，通過合理運用CSS屬性，我們可以優化文字環繞圖片的效果，提高用戶的閱讀體驗。