定義和用法

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
註釋：假如在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

下面舉幾個例子來看看float有哪些妙用

實例1

css代碼

.wrap{
    width: 40%;
    margin:0 auto;
    background: #eee;
}
.div1{
width: 200px;
height: 100px;
border:1px solid red;
}
.div2{
    width:100px;
    height: 80px;
    border:1px solid green;
}
.div3{
    width:80px;
    height: 60px;
    border:1px solid blue;
}

這是按照正常文檔流來輸出的。
下面我們改一下div1的樣式
css代碼

.div1{
width: 200px;
height: 100px;
float:left;
border:1px solid red;
}

再來看下效果

div2由於受到div1的浮動影響，div2填充了div1遺留下來的空間，發生重疊，div2在上面。div2的文本則被div1擋住，圍繞在div1的周圍。

這是因為浮動是不徹底的脫離文檔流，當某個元素使用float時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對於使用絕對布局脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。

可以通過給受影響的元素設置clear屬性來清楚浮動，值可以是left，right，both。

再來看一個例子

實例2

css代碼

.wrap{
width: 40%;
margin:0 auto;
background: #eee;
}
.div1{
width: 200px;
height: 100px;
float:left;
border:1px solid red;
}
.div2{
    width:100px;
    height: 80px;
    float:left;
    border:1px solid green;
}
.div3{
    width:80px;
    height: 60px;
    float:left;
    border:1px solid blue;
}

效果：

當把3個div都設置為左浮動後，由於沒有給wrap設置高度，沒有未浮動的內容給它撐開，wrap的高度縮為0。

可以給wrap設置overflow來清楚浮動影響：
css代碼

.wrap{
width: 40%;
margin:0 auto;
background: #eee;
overflow: hidden;
_zoom:1;
}

效果：

_zoom:1;屬性是IE瀏覽器的專有屬性，Firefox等其它瀏覽器不支持。它可以設置或檢索對象的縮放比例。
效果：

實例3

css代碼

img 
{
float:right;
border:1px dotted black;
}
span
{
float:left;
width:2.5em;
font:400%/80%  bold algerian,courier;
}

效果：

通過給和設置浮動，讓它們顯示在父元素

的左上角和右上角，同時實現文字環繞。

float還可以用來實現橫向兩列布局，三列布局，水平菜單等，這裏就不列舉了。

css float屬性詳解