HTML+CSS 輕鬆入門之佈局模型

在網頁中，元素有三種佈局模型：

、流動模型（position:static）

2、浮動模型(float: left、right) 

、層模型（position:absolute、fixed、relative）

position：relative

它保留該元素在“流動模型”或“浮動模型”所佔據的空間，不改變元素的顯示方式：“內聯”或“塊狀”。它只告訴元素按照元素在原來的位置相對移動。但它畢竟是層模型佈局的元素，如果與其它元素重疊，它將顯示在非層模型佈局的元素的上方。另外設定了relative之後，元素便具有了完整的盒子模型，即便是內聯元素，設置高度、上下補白，上下邊界也變得有效了，並且這些設置將體現在其在文檔流中所佔據的空間上。

流動模型

流動（Flow）是預設的網頁佈局模式。任何沒有具體定義position:absolute;或position:fixed;屬性，以及沒有被定義浮動float:left;或float:right;的元素都將預設呈現流

4個比較典型的特徵：

、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置，不

2、內聯元素都會在所處的包含元素內從左到右水平分佈顯示。有人把這種分佈方式稱為文字流，文字流源自於文字的從左到右自然流動，本質上它與HTTP傳輸方式和瀏覽器的解析機制密切相關。超出一行後，會自動從上而下換行顯示，然後繼續從左到右按順序流動，以此類推。當然，讀者可以利用CSS文字屬性強制改變文本流動方向。

3、相鄰的兩塊狀元素或嵌套的塊狀元素如果定義了上下外邊距會重疊，則重疊的結果是兩者之中的最大值。針對嵌套的重疊現象，可以透過定義父元素的overflow屬性值為「auto」來阻止這種重疊。

4、浮動元素不會發生外邊距重疊，而浮動與塊狀元素接觸時，透過後出現的元素來決定是否重疊。從程式設計的角度講，修改已經建構好的dom樹，不如決定下一個元素如何顯示的效率要高。如果浮動元素是塊狀元素的父元素，根據上邊的規則是應該重疊的，但是浮動元素會自動計算內部的高度寬度，所以結果外邊距不會發生重疊。

浮動模型

浮動是另一個完全不同於流動的佈局模型，它遵循浮動規則，但仍能看到流動對它的潛在影響。任何元素在預設情況下是不能夠浮動的，但都可以用CSS定義為浮動，如div、list、p、table，以及img等元素都可以被定義為浮動，事實上即使是如span、strong等這樣的內聯元素也可以定義為浮動。

浮動佈局模型具有下面幾個特徵：

1、任何定義為float的元素都會自動被設定為區塊狀顯示。這樣就具有了完整的盒子模型。

2、如果當我們沒有指定浮動元素的寬度時，浮動元素會自動縮小到能夠包含內容的寬度。

3、浮動模型不會與流動模型發生衝突。當元素定義為浮動佈局時，浮動元素不會脫離正常文件流而任意的浮動，它的上邊線將與未被聲明為浮動時的位置一樣。但是在水平方向上，它的浮向邊會盡可能地靠近包含它的元素的邊緣（這個邊緣是指包含元素補白的內邊緣）。

4、與普通元素一樣，浮動元素總是位於包含元素內，不會遊離於外，或破壞元素包含關係，這與層佈局模型不同。

5、關於流動元素環繞問題。雖然浮動元素能夠隨文件流動，但浮動模型與流動模型仍存在本質差異。浮動元素的後面的內聯元素都能夠以流的形式環繞浮動元素左右，甚至與上面的文字流連成一體。而塊狀元素則不同，它會忽略所有浮動元素所佔據的空間，好像這個浮動元素根本就不存在，以這種方式確定自己在流動模型中的位置。

6、關於浮動元素間並列顯示問題。當兩個或兩個以上的相鄰元素都被定義為浮動顯示時，如果有足夠的空間容納它們，浮動元素之間可以並列顯示。它們的上邊線是在同一水平線上的。如果沒有足夠的空間，那麼後面的浮動元素將會下移到能夠容納它的地方，這個向下移動的元素有可能產生一個單獨的浮動。許多設計師喜歡使用浮動模型來佈局網頁，原因就在於它能夠突破流動模型佈局中塊狀元素不能並列顯示的問題。

7、浮動元素在浮動時會盡可能靠近上一個浮動素，進而把其它非浮動元素擠在一邊。如果擠不動(如：塊狀元素，或沒有足夠的空間在同一行顯示內聯元素和這個浮動元素)

其他元素它就換行並緊鄰著顯示在上個元素之後。

8、總結：浮動元素仍然處於文件流程之中，以文件流程元素為自己定位，但是它不佔用文件流程的空間。

浮動清除

# 只有區塊狀元素可以定義清除屬性，對內聯元素定義清除無效。一個塊狀元素設定"clear:both"後，會保證當其被解析時左右不會出現浮動元素。但如

果它是浮動元素（設定了float屬性），後面的浮動元素仍有可能浮動在其左右。 當一個浮動元素定義了clear屬性，它不會對前面的任何物件產生影響，也不會對後面的物件形成影響，只會影響自己的佈局位置。這裡的影響是指不會主動改變別的物件的位置。

 註：個人感覺，這個屬性中文名翻譯為「乾淨」更好，他表示當前元素在其被解析時

保證哪邊是乾淨的，沒有漂浮物的。

浮動巢狀

浮動元素可以相互嵌套，嵌套規律與流動元素嵌套相同。浮動的包含元素總是會自動調整自身高度和寬度以實現浮動子元素的包含。  定義了「float」的元素會自動計算元素內浮動元素所佔的寬高，使其與其內的內容適應。沒有定義該屬性則無法自動計算寬高，導致父元素寬高顯示不正常。也可以透過定義父元素的overflow屬性為「auto」來自動擴充元素的寬高。

浮動與流動巢狀

 #單純的流動元素之間或單純的浮動元素之間相互嵌套一般都比較好處理，但是如果把浮動元素嵌入流動元素之內，則顯示的效果就會很複雜，此時包含元素將根據自身屬性進行顯示，不再受子浮動元素的影響，也就是說父元素不能夠自適應子浮動元素的#高。 浮動元素的起點將由它在包含元素內的位置來決定，但浮動元素將在包含元素的上面展開，這種情況將與絕對定位的元素有點類似。

層模型

層佈局模型源自於圖形影像編輯器中非常流行的圖層編輯功能，圖層能夠精確操作和編輯圖片而廣受平面設計師的歡迎，但在網頁設計領域，由於網頁大小的活動性，層布

局沒能受到熱捧。 為了支援層佈局模型，CSS定義了一組定位（positioning）屬性。元素定位的設計思路非常簡單，它允許使用者精確定義網頁元素的相對位置，這裡的相對可以相對元素原來顯示的位置，或是相對最近的包含塊元素，或是相對瀏覽器視窗。

定位類型

1.static：表示不定位，元素遵循HTML預設的流動模型，如果未明確宣告元素的定位類別型，則預設為該值。

2.absolute：表示絕對定位，將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含區塊進行絕對定位。如果不存在這樣的包含區塊，則相對於body元素，即根據瀏覽器窗口，而其層疊順序則透過# z-index屬性來定義。

3.fixed：表示固定定位，與absolute定位類型類似，但它的包含區塊是視圖（螢幕內的網頁視窗）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會永遠位於瀏覽器視窗內視圖的某個位置，不會受文件流影響，這與backgroundattachment:fixed;屬性功能相同。

4.relative：表示相對定位，它透過left、right、top、bottom#屬性決定元素在正常文件流程（或浮動模型）中的偏移位置。相對定位完成的過程是先按static(float)

方式產生一個元素，然後移動這個元素，移動方向和振幅由left、right、top、##bottom

##屬性確