在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)用到圖片浮動(dòng)的效果，使頁(yè)面排版更加美觀。而實(shí)現(xiàn)圖片浮動(dòng)的主要方法是使用CSS。以下是幾種實(shí)現(xiàn)圖片浮動(dòng)的CSS樣式。 1.浮動(dòng)到左側(cè) 如果想讓圖片浮動(dòng)到左側(cè)，可以使用以下代碼：

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

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

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

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

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

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

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

以上就是實(shí)現(xiàn)圖片浮動(dòng)的幾種CSS樣式，希望對(duì)大家有所幫助。