CSS是前端開發領域的重要一環，可以讓我們在網頁中實現各種復雜的效果。其中，文字圖片四面環繞是一種常用的布局方式，可以讓文字和圖片更好地結合起來，增加閱讀的美感和趣味性。

.wrapper {
width: 500px;
margin: 0 auto;
}
.img-wrap {
float: left;
margin-right: 20px;
}
.txt-wrap {
overflow: hidden;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
@media screen and (max-width: 600px) {
.img-wrap {
display: block;
float: none;
margin: 0 auto;
}
}

代碼中，我們首先定義了一個名為.wrapper的容器，用于包裹文本和圖片。接著，我們將圖片用float:left;向左浮動，并設置了一定的外邊距（margin-right）以便于和文本之間留出適當的間距。同時，我們將文本的容器框設置為overflow:hidden;，以便于自動控制高度并容納圖片。最后，我們使用clearfix的清浮動方法確保父級容器能夠自適應高度。

需要注意的是，我們加入了一個媒體查詢@media，用于在屏幕寬度小于600px時將圖片顯示居中并撤銷浮動。這樣可以使得在手機和平板等小屏幕設備上也能夠保持布局的合理性。