在網頁設計中，圖片的使用是很重要的，而要讓網站呈現更好的效果，讓圖片的周圍顯示一些文字可能會更有趣。這時，文字環繞圖片周圍就很有用了。在 CSS 中實現文字環繞圖片我們需要使用 float 屬性。

img{
float: left;
margin: 0 10px 10px 0;
}

在這里，我們設置了圖片的浮動屬性，同時設置了圖片的外邊距。這使得文本可以環繞在圖片的周圍。

但是，如果所有的文本都環繞在圖片周圍，可能會極大地影響頁面的可讀性。這是，我們需要使用 clear 屬性，讓文本可以跳出圖片的浮動效果。

.clearfix:after{
content: "";
display: block;
clear: both;
}

上面的代碼中，我們創建了一個clearfix 類，里面包含一些清除浮動的代碼。可以通過給一個元素添加 clearfix 作為其類名來清除其中的浮動。如下所示。

這里是文本內容。

最后，我們還可以進一步設置文本與圖片的距離、文字樣式等。這樣，就可以很好的實現文字環繞圖片周圍的效果了。