CSS浮動是網頁設計中常用的一種排版工具。它可以實現多列布局、文字環繞圖片等效果。下面介紹一下CSS浮動的基本概念和使用方法。

/*浮動元素的基本樣式*/
.float{
float:left; /*元素向左浮動*/
width:200px; /*元素寬度*/
height:200px; /*元素高度*/
margin:10px; /*元素間距*/
background-color:#ccc; /*元素背景顏色*/
}

CSS浮動通過設置元素的float屬性來實現。它有三個取值：left、right和none。left表示元素向左浮動，right表示元素向右浮動，none表示元素不浮動。

/*多列布局*/
.column{
float:left;
width:30%;
margin:1.66%;
background-color:#ccc;
padding:10px;
}

多列布局是CSS浮動的常見應用之一。通過設置每列元素的浮動方式和寬度，可以實現分列排版。如上述代碼所示，設置每列元素的寬度為30%，間距為1.66%。這樣，三列元素的總寬度就會是100%。同時，每列元素還可以設置內邊距、背景顏色等樣式。這樣就可以實現一個簡單的多列布局。

/*文字環繞圖片*/
.img{
float:left;
margin:10px;
}
.text{
margin-left:220px;
}

CSS浮動還可以實現文字環繞圖片的效果。如上述代碼所示，首先將圖片元素設置為向左浮動，然后設置一個空白區域（即文字元素）的左邊距為圖片元素的寬度+間距。這樣，文字就會自動環繞在圖片周圍。

總的來說，CSS浮動是一種非常方便的排版工具。通過設置浮動屬性，可以實現多種頁面布局和效果。但是，需要注意的是，在使用CSS浮動時，要注意清除浮動的影響，否則可能會出現一些排版上的問題。