CSS 圖片浮動效果是網頁設計中經常用到的一種效果，它可以讓圖片與文字更好地結合在一起，提升了網頁的內容質量。以下是一段代碼實現圖片浮動效果：

以下是一段 HTML 代碼，其中包含了一個 div 元素和一個 img 元素：

<div class="float-left">
<img src="example.jpg" alt="示例圖片">
</div>

接下來，我們使用 CSS 代碼來實現這個圖片的浮動效果：

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

在 CSS 代碼中，我們首先使用了類選擇器 .float-left 來選擇包含圖片的 div 元素，并設置了它的浮動方向為 left，也就是向左浮動。接著，我們使用了 margin-right 屬性來給圖片留出一定的空白間隔，這樣圖片就不會與緊接著它后面的文字重疊在一起了。

需要注意的是，以上代碼只是實現了一個通用的圖片浮動效果，并不能直接使用在網頁中。在實際應用中，我們需要根據具體的情況來設置圖片的大小、位置和間距等屬性，以達到最佳的展示效果。

總之，CSS 圖片浮動效果是一種非常實用的網頁設計效果，在正確地使用它的前提下，可以讓網頁更加美觀和易讀。以上代碼只是一種基礎的實現方法，讀者可以根據需要進行自定義和修改。