1. 頁面配置方式：介紹文檔流、浮動層以及float屬性。
2. float:left ：介紹float為 left 時的布局方式。
3. float:right ：介紹float為 right 時的布局方式。
4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時的布局方式。
頁面配置方式，主要包含：文檔流、浮動層、float屬性。
HTML頁面的標準文檔流(預設布局)是：從上到下，從左至右，遇塊(區塊層級元素)換行。
浮動層：給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼著父元素(預設為body文本地區)的左右邊框。
而此浮動元素在文檔流空出的位置，由後續的(非浮動)元素填充上去：區塊層級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋區塊層級元素。內嵌元素：有空隙就插入。
① left ：元素向左浮動。
② right ：元素向右浮動。
③ none ：預設值。
④ inherit ：從父元素繼承float屬性。
<!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><p id=a >p-a</p><p id=b>p-b</p><p id=c>p-c</p><input type="text" value="input1" /><input type="text" value="input2" /><input type="text" value="input3 " /><p id=d>p-d</p><input type="text" value="input4 " /></body></html>
說明：元素向左浮動。
input2 添加：float:left
p-b 添加：float:left
p-d 添加：float:left
① 瀏覽器的寬度“不夠長”時
② 瀏覽器的寬度"夠長"時
| 當前元素分類(float:left) | 下一個緊鄰元素分類(不含float) | 結論 |
| 區塊層級元素(a) | 區塊層級元素(b) | b會填充a遺留下來的空間，a會和b發生重疊，a的圖層在上面。 |
| 內嵌元素(b) | b會緊跟在a的後面。並根據自身內嵌元素的特點，是否換行。 | |
| 內嵌元素(a) | 區塊層級元素(b) | b不會跟隨a的移動。 |
| 內嵌元素(b) | b會緊跟在a的後面。並根據自身內嵌元素的特點，是否換行。 |
說明：元素向右浮動。
input2元素：添加 float:right
p-b 添加：float:right
p-d 添加：float:right
① 瀏覽器的寬度“不夠長”時
② 瀏覽器的寬度"夠長"時
| 當前元素分類(float:right) | 下一個緊鄰元素分類(不包含float) | 結論 |
| 區塊層級元素(a) | 區塊層級元素(b) | b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。 |
| 內嵌元素(b) | b會填充a遺留下來的空間。 | |
| 內嵌元素(a) | 區塊層級元素(b) | b不會跟隨a的移動。 |
| 內嵌元素(b) | b會填充a遺留下來的空間。 |
因內嵌元素的特性，最好別把內嵌元素與區塊層級元素相鄰使用float屬性。
下面都以區塊層級元素為例：
預設視圖：
給這三個p都添加 float:left
①瀏覽器的寬度"足夠長"
②瀏覽器的寬度"不夠長"
Ⅰ 相鄰的浮動元素，left屬性最前面的元素，排在最左面。
Ⅱ 成為浮動元素後，在浮動層擁有內嵌元素的"特性"，當多個浮動元素1排容不下時，就換行。
給這三個p都添加 float:right
①瀏覽器的寬度"足夠長"
②瀏覽器的寬度"不夠長"
Ⅰ 相鄰的浮動元素，right屬性最前面的元素，排在最右面。
Ⅱ 成為浮動元素後，在浮動層擁有內嵌元素的"特性"，當多個浮動元素1排容不下時，就換行。
把p-a的height值設為大於p-b，三個p都添加 float:left後：
①瀏覽器的寬度"足夠長"
②瀏覽器寬度縮小時
③瀏覽器寬度進一步縮小時
Ⅰ height不相等的p浮動元素排序時，照擁有內嵌元素的"特性"，當多個浮動元素1排容不下時，就換行。
把添加float的屬性的p元素嵌入在一個p中，並給此p添加width和height屬性。瀏覽器寬度縮小時，也不會發生變形。
可參照 CSS HTML元素布局及Display屬性介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
