圖文混排成為了現(xiàn)代網(wǎng)頁設計中不可或缺的一部分。圖文混排既可以增加文章的閱讀體驗，同時也能夠更好地傳達文章的主題。CSS為圖文混排提供了很多方便的樣式，可以在不影響文章可讀性的情況下優(yōu)化頁面。本文將介紹一些常見的圖文混排CSS實例。

/* 圖片左對齊 */
img {
float: left;
margin-right: 10px;
}

可以使用float屬性將一張圖片向左或向右對齊。如上述代碼，將圖片向左對齊，并在圖片右側(cè)添加一些間距以免圖片與文本重疊。

/* 圖片右對齊 */    
img {
float: right;
margin-left: 10px;
}

同樣地，可以使用float屬性將圖片向右對齊并在圖片左側(cè)添加一些間距。如上述代碼。

/* 圖片居中 */
img {
display: block;
margin: 0 auto;
}

如果希望圖片居中，可以使用display:block和margin: 0 auto的組合來實現(xiàn)。如上述代碼，可以讓圖片在其容器中居中顯示。

/* 文字環(huán)繞圖片 */
img {
float: left;
margin-right: 10px;
shape-outside: circle();
clip-path: circle();
}

如果希望文字環(huán)繞圖片，可以使用shape-outside和clip-path屬性。如上述代碼，可以讓圖片變成圓形，并使得文字在其周圍環(huán)繞。

/* 圖片懸浮效果 */
img:hover {
transform: scale(1.1);
}

使用CSS的transform屬性，可以給圖片添加懸浮效果。如上述代碼，可以實現(xiàn)鼠標懸浮在圖片上時，將圖片放大1.1倍的效果。

以上是最常用的一些圖文混排CSS實例，它們可以幫助您更好地定制和優(yōu)化您的網(wǎng)頁。希望這篇文章對您有所幫助！