在網頁設計中，有時候需要讓文字環繞在圖片或其他的元素周圍，這時候可以使用CSS來實現文字包圍。下面我們來詳細介紹一下如何用CSS實現文字包圍的效果。

.wrap{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
p{
position: absolute;
z-index: 2;
}
p:first-letter{
float: left;
font-size: 40px;
margin: 0 10px 0 0;
}

首先，我們需要創建一個容器 (wrap)，然后在里面放置圖片和文字。圖片的位置要用絕對定位，并設置 z-index 為 1，這樣文字就會出現在圖片的上面，達到文字圍繞圖片的效果。

在容器中添加 p 標簽，并且給他們設置 position: absolute; 和 z-index: 2，這樣文字就能夠出現在圖片之上了。

最后，在 p 標簽的第一個字母設置 float: left;，這樣它就能夠脫離文本流，并且像圖片一樣定位。為了美觀，我們還可以給第一個字母設置一些樣式，比如字體大小和右邊距。

通過以上的設置，我們就成功實現了文字包圍的效果。