在網頁設計中，經常會用到圖片浮動的效果，使頁面排版更加美觀。而實現圖片浮動的主要方法是使用CSS。以下是幾種實現圖片浮動的CSS樣式。 1.浮動到左側 如果想讓圖片浮動到左側，可以使用以下代碼：

p img{
float: left;
margin: 10px;
}

其中，float: left;代表讓圖片向左浮動；margin: 10px;則是為圖片添加外邊距，使得圖片與文字之間有一定距離。 2.浮動到右側 如果想讓圖片浮動到右側，可以使用以下代碼：

p img{
float: right;
margin: 10px;
}

與浮動到左側不同的是，這里的float屬性變成了float: right;，即讓圖片向右浮動。 3.清除浮動 在使用浮動布局時，有時會出現一些排版問題，需要清除浮動以保證頁面布局不受影響。可以使用以下代碼：

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

在需要清除浮動的地方，添加class屬性為clearfix即可，例如：

<div class="clearfix">
<p>這里是文字內容</p>
<img src="圖片地址">
</div>

以上就是實現圖片浮動的幾種CSS樣式，希望對大家有所幫助。