CSS圖片浮動在文章中 在設(shè)計網(wǎng)站時，我們會發(fā)現(xiàn)經(jīng)常需要在文章中插入圖片，這些圖片可以一定程度上豐富頁面內(nèi)容，讓讀者閱讀更加生動。然而，如果照片太大，會影響整個頁面的布局，如果我們只是簡單的調(diào)整照片的大小，還是達不到很好的效果。因此，浮動圖片是最好的選擇。 浮動圖片可以讓文本圍繞它其它浮動圖片實現(xiàn)更好的排版，使頁面整潔優(yōu)雅。如何實現(xiàn)呢？那么，我們就可以運用CSS技術(shù)來解決這個問題。 我們可以添加一個類名為 “float” 的CSS類來實現(xiàn)浮動圖片。比如下面的例子，我們可以把它復(fù)制到pre標(biāo)簽內(nèi)(注意不要復(fù)制

和標(biāo)記本身)：
/*浮動圖片樣式*/
.float {
float: left; /*圖片向左浮動*/
margin: 0 15px 15px 0; /*設(shè)置圖片與文本的間距*/
}
在樣式表中，我們使用了一個名為 “float” 的類來設(shè)置圖片。這個類讓圖片向左浮動，并且創(chuàng)建一個圖像與周圍元素進行適當(dāng)?shù)拈g距。現(xiàn)在，當(dāng)我們想要給一個圖片添加浮動特效時，只需要在HTML標(biāo)記中添加這個類，如下：
這是一個段落，其中有一個圖片：花是非常美麗的。
在標(biāo)記中，我們添加了一個 class=”float”， 這將添加一個浮動圖片效果。上面的樣式表中，設(shè)置的間距是 0 15px 15px 0，這意味著該圖像將在左側(cè)與其他元素保持15像素的距離，在下方與元素保持15像素的距離。
要注意的一點是，考慮到瀏覽器兼容性問題，最好還是在CSS類名前添加標(biāo)簽名，例如： p.float。
通過浮動圖片可以使頁面布局更整潔，并且讓文本和圖片更加完美地結(jié)合起來。使用CSS技術(shù)來實現(xiàn)這一目標(biāo)非常容易，只需要添加一個浮動類，設(shè)置圖像與周圍元素的間距即可。