CSS3中的float屬性是用來定義元素的浮動方向、位置以及周圍元素的環(huán)繞方式。對于排版比較復(fù)雜的網(wǎng)頁，float屬性能夠幫助我們實(shí)現(xiàn)簡單的布局需求。

float屬性可以取left, right, none三個值。其中，left表示元素向左浮動， right表示元素向右浮動， none表示元素不浮動。

下面是一個簡單例子，使用float屬性將兩個圓形圖片放在一行并排展示。

.image {
float:left;
width:50%;
}

此時，兩個圖片會左右排列，橫向占據(jù)屏幕一半的寬度。更進(jìn)一步，我們可以使用clear屬性來清除元素的浮動，使得下面的元素不會受到浮動元素的影響。

例如，以下代碼段使用clear:both屬性將一個段落從浮動元素的影響下進(jìn)行了分隔。

.image {
float:left;
width:50%;
}
.separator {
clear:both;
}
這是一個段落，它不會被浮動元素的影響所擾。

除了浮動元素，我們也可以將容器元素進(jìn)行浮動來實(shí)現(xiàn)布局效果。例如，下面的例子展示了通過對父元素設(shè)置float屬性來實(shí)現(xiàn)左右兩欄布局的效果。

.left-col {
width:200px;
float:left;
}
.right-col {
width:calc(100% - 200px);
float:right;
}
這是左欄
這是右欄

以上就是CSS3中float屬性的用法介紹。它對于簡單的布局需求來說非常方便、實(shí)用。