css float屬性詳解

定義和用法

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

值	描述
left	元素向左浮動
right	元素向右浮動
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置
inherit	規定應該從父元素繼承 float 屬性的值

下面舉幾個例子來看看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還能夠用來實現橫向兩列布局，三列布局，水平菜單等，這裏就不列舉了。