本篇主要介紹float屬性：定義元素朝哪個方向浮動。
1. 頁面布局方式：介紹文件流、浮動層以及float屬性。
2. float:left ：介紹float為 left 時的布局方式。
3. float:right ：介紹float為 right 時的布局方式。
4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時的布局方式。
頁面布局方式，主要包含：文件流、浮動層、float屬性。
html頁面的標準文件流(預設布局)是：從上到下，從左到右，遇塊(塊級元素)換行。
浮動層：給元素的float屬性賦值後，就是脫離文件流，進行左右浮動，緊貼著父元素(預設為body文字區域)的左右邊框。
而此浮動元素在文件流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。
① left ：元素向左浮動。
② right ：元素向右浮動。
③ none ：預設值。
④ inherit ：從父元素繼承float屬性。
>2.3-float屬性
title
>
<
style
type
="text/css"
>
#a
#b
#c
#d
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
>
說明：元素向左浮動。
input2 新增：float:left
div-b 新增：float:left
div-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
div-b 新增：float:right
div-d 新增：float:right
① 瀏覽器的寬度「不夠長」時
② 瀏覽器的寬度"夠長"時
當前元素分類(float:right)
下乙個緊鄰元素分類(不包含float)
結論塊級元素(a)
塊級元素(b)
b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。
內聯元素(b)
b會填充a遺留下來的空間。
內聯元素(a)
塊級元素(b)
b不會跟隨a的移動。
內聯元素(b)
b會填充a遺留下來的空間。
因內聯元素的特性，最好別把內聯元素與塊級元素相鄰使用float屬性。
下面都以塊級元素為例：
預設檢視：
給這三個div都新增 float:left
①瀏覽器的寬度"足夠長"
②瀏覽器的寬度"不夠長"
ⅰ 相鄰的浮動元素，left屬性最前面的元素，排在最左面。
ⅱ 成為浮動元素後，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
給這三個div都新增 float:right
①瀏覽器的寬度"足夠長"
②瀏覽器的寬度"不夠長"
ⅰ 相鄰的浮動元素，right屬性最前面的元素，排在最右面。
ⅱ 成為浮動元素後，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
把div-a的height值設為大於div-b，三個div都新增 float:left後：
①瀏覽器的寬度"足夠長"
②瀏覽器寬度縮小時
③瀏覽器寬度進一步縮小時
ⅰ height不相等的div浮動元素排序時，照擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
把新增float的屬性的div元素嵌入在乙個div中，並給此div新增width和height屬性。瀏覽器寬度縮小時，也不會發生變形。
可參照 css html元素布局及display屬性介紹
web開發之路系列文章
css float浮動屬性詳解
浮動的標籤可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止 浮動標籤不佔文件的普通流空間 float浮動樣式 1 left 向左浮動 2 right 向右浮動 3 none 取消浮動如果乙個父級標籤的子元素浮動後，在沒有設定父級標籤高度情況下，父級標籤的內容高度無法被子元素撐開，...
CSS float（浮動）和清除浮動
float元素也稱為浮動元素，設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。簡單來說，就是讓block元素無視float元素，讓inline元素讓流水一樣圍繞著float元素來實現浮動布局。1 背景不能...
css float樣式屬性
html 編寫過程中需要注意 規範，錯落有致即是其中最基本的要求，但是瀏覽器會將換行 之間多個空格解釋為乙個空格，但是這乙個空格有時會破壞整個頁面布局，如何解決呢？通過子元素浮動即可解決。設定元素浮動方向，該屬性有多個值 為了後期維護，需要縮排換行，換行後在html中，瀏覽器預設將多個空格視為乙個空...