站長(zhǎng)資訊網(wǎng)css浮動(dòng)的屬性是指“float”屬性，用于指定一個(gè)盒子（元素）是否應(yīng)該浮動(dòng)，定義朝哪個(gè)方向浮動(dòng)。元素使用了float屬性后，可以使該元素脫離標(biāo)準(zhǔn)流本身，浮動(dòng)在其他元素之上，使其不再占用原本屬于該元素的空間。
（推薦教程：CSS視頻教程）
1. 頁(yè)面布局方式
頁(yè)面布局方式，主要包含：文檔流、浮動(dòng)層、float屬性。
1.1 文檔流
HTML頁(yè)面的標(biāo)準(zhǔn)文檔流(默認(rèn)布局)是：從上到下，從左到右，遇塊(塊級(jí)元素)換行。
1.2 浮動(dòng)層
浮動(dòng)層：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。
而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。
1.3 float 屬性介紹
float屬性：用于指定一個(gè)盒子（元素）是否應(yīng)該浮動(dòng)，可以定義元素朝哪個(gè)方向浮動(dòng)。
元素使用了float屬性后，可以使該元素脫離標(biāo)準(zhǔn)流本身，浮動(dòng)在其他元素之上，使其不再占用原本屬于該元素的空間，這樣會(huì)導(dǎo)致后面的元素上移并占用原本屬于該元素的空間。
注意： 絕對(duì)定位的元素忽略float屬性！
屬性值：
?、?left ：元素向左浮動(dòng)。
?、?right ：元素向右浮動(dòng)。
?、?none ：默認(rèn)值。
?、?inherit ：從父元素繼承float屬性。
1.4 示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2.3-float屬性</title> <style type="text/css"> #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } </style> </head> <body> <div id=a >div-a</div> <div id=b>div-b</div> <div id=c>div-c</div> <input type="text" value="input1" /> <input type="text" value="input2" /> <input type="text" value="input3 " /> <div id=d>div-d</div> <input type="text" value="input4 " /> </body> </html>
2. float:left
說(shuō)明：元素向左浮動(dòng)。
2.1 代碼變更
input2 添加：float:left
div-b 添加：float:left
div-d 添加：float:left
2.2 變更后視圖
?、?瀏覽器的寬度“不夠長(zhǎng)”時(shí)
② 瀏覽器的寬度"夠長(zhǎng)"時(shí)
2.3 結(jié)論
|
當(dāng)前元素分類(float:left) |
下一個(gè)緊鄰元素分類(不含float) |
結(jié)論 |
|
塊級(jí)元素(a) |
塊級(jí)元素(b) |
b會(huì)填充a遺留下來(lái)的空間，a會(huì)和b發(fā)生重疊，a的圖層在上面。 |
|
內(nèi)聯(lián)元素(b) |
b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。 |
|
|
內(nèi)聯(lián)元素(a) |
塊級(jí)元素(b) |
b不會(huì)跟隨a的移動(dòng)。 |
|
內(nèi)聯(lián)元素(b) |
b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。 |
3. float:right
說(shuō)明：元素向右浮動(dòng)。
3.1 代碼變更
input2元素：添加 float:right
div-b 添加：float:right
div-d 添加：float:right
3.2 變更后視圖
?、?瀏覽器的寬度“不夠長(zhǎng)”時(shí)
?、?瀏覽器的寬度"夠長(zhǎng)"時(shí)
3.3 結(jié)論
|
當(dāng)前元素分類(float:right) |
下一個(gè)緊鄰元素分類(不包含float) |
結(jié)論 |
|
塊級(jí)元素(a) |
塊級(jí)元素(b) |
b會(huì)填充a遺留下來(lái)的空間，若a會(huì)和b發(fā)生重疊(父容器寬度減少)，a的圖層在上面。 |
|
內(nèi)聯(lián)元素(b) |
b會(huì)填充a遺留下來(lái)的空間。 |
|
|
內(nèi)聯(lián)元素(a) |
塊級(jí)元素(b) |
b不會(huì)跟隨a的移動(dòng)。 |
|
內(nèi)聯(lián)元素(b) |
b會(huì)填充a遺留下來(lái)的空間。 |
4. 相鄰元素含有float屬性
因內(nèi)聯(lián)元素的特性，最好別把內(nèi)聯(lián)元素與塊級(jí)元素相鄰使用float屬性。
下面都以塊級(jí)元素為例：
默認(rèn)視圖：
4.1 float:left
給這三個(gè)div都添加 float:left
4.1.1 視圖
?、贋g覽器的寬度"足夠長(zhǎng)"
?、跒g覽器的寬度"不夠長(zhǎng)"
4.1.2 結(jié)論
?、?相鄰的浮動(dòng)元素，left屬性最前面的元素，排在最左面。
Ⅱ 成為浮動(dòng)元素后，在浮動(dòng)層擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。
4.2 float:right
給這三個(gè)div都添加 float:right
4.2.1 視圖
①瀏覽器的寬度"足夠長(zhǎng)"
?、跒g覽器的寬度"不夠長(zhǎng)"
4.2.2 結(jié)論
Ⅰ 相鄰的浮動(dòng)元素，right屬性最前面的元素，排在最右面。
?、?成為浮動(dòng)元素后，在浮動(dòng)層擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。
4.3 height高度不等的塊級(jí)元素
把div-a的height值設(shè)為大于div-b，三個(gè)div都添加 float:left后：
4.3.1 視圖
①瀏覽器的寬度"足夠長(zhǎng)"
?、跒g覽器寬度縮小時(shí)
?、蹫g覽器寬度進(jìn)一步縮小時(shí)
4.3.2 結(jié)論
?、?height不相等的div浮動(dòng)元素排序時(shí)，照擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。
4.3.3 解決瀏覽器寬度縮小變形
把添加float的屬性的div元素嵌入在一個(gè)div中，并給此div添加width和height屬性。瀏覽器寬度縮小時(shí)，也不會(huì)發(fā)生變形。
