我們經常需要用到圖片來豐富網頁，但有時候圖片比較單調，如果我們能夠讓文字圍繞著圖片，那么頁面將會更為生動。這就需要了解一下CSS如何設置文字圍繞圖片。

img{
float: left;
margin-right: 10px;
}

上面的代碼中，我們選中圖片元素，然后設置了它的浮動方向為左浮動，并且設置了它的右邊距為10像素。這樣的話，圖片就會被浮動到文字的左側，而文字會自動圍繞圖片排列。

上面的代碼只是一個簡單的示例，實際上CSS對文字圍繞圖片的設置還有很多其他的屬性。比如說，可以使用shape-outside屬性，讓文字圍繞著不規則形狀的圖片排列。還可以使用clip-path屬性，對圖片進行任意形狀的裁剪。

img{
shape-outside: circle();
float: left;
margin-right: 10px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 85%, 40% 100%, 0% 100%);
}

上面的代碼中，圓形形狀的圖片將會讓圍繞著它的文字排列成一個圓形的形狀，并且使用clip-path屬性對圖片進行了裁剪，使得圖片呈現的是多邊形的形狀。

值得注意的是，不是所有的瀏覽器都支持shape-outside屬性和clip-path屬性，所以在編寫頁面的時候需要注意一下兼容性問題。

總之，使用CSS讓文字圍繞著圖片排列，能夠讓頁面更具有吸引力，并且可以讓頁面的排版更為靈活多變。我們只需要選擇合適的屬性和值，就能夠輕松實現這一效果。