CSS可以讓我們在網頁中很容易地實現多種樣式效果，其中一種常見的效果是讓文字環繞在圖片周圍。下面我們將介紹如何通過CSS樣式實現文字浮動圖片。

/* 定義樣式 */
.img-wrapper {
float: left; /* 其它選擇器可以是內聯塊元素display:inline-block; */
margin-right: 20px; /* 圖片與文字之間的距離 */
}
.img-wrapper img {
max-width: 100%; /* 圖片寬度不超過父容器 */
height: auto; /* 圖片高度自適應 */
}

上述CSS代碼定義了一個名為img-wrapper的選擇器，它包含一張圖片和一段文字。其中，圖片的尺寸會自動調整，保證不會超過其父容器的大小。而浮動屬性float:left;則讓圖片靠左浮動，從而實現文本環繞的效果。

<div class="img-wrapper">
<img src="your-image.jpg" alt="your image">
</div>
<p>Your text goes here...</p>

我們將圖片放在一個名為img-wrapper的div容器中，然后在該容器中插入一張圖片。接下來，我們只需要像平時編輯文本一樣，在p標簽中輸入需要添加的文字即可。

上面的代碼不僅實現了文字浮動圖片的效果，而且還允許我們對樣式進行自定義，比如增加圖片與文字的間距、調整圖片的寬度等等。

總之，通過CSS樣式實現文字浮動圖片是很簡單的。我們只需要使用浮動屬性、內聯塊元素和正確配置其它樣式選項即可輕松實現。希望這篇文章能夠幫助你掌握這一技巧，讓你的網站更美觀、優雅。