在網(wǎng)頁中，元素有三種布局模型：

1、流動模型（position:static）

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

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

其中比較特殊的布局方式是：

 position：relative

 它保留該元素在“流動模型”或者“浮動模型”所占據(jù)的空間，不改變元素的顯示方式：“內(nèi)聯(lián)”或者“塊狀”。它僅告訴元素按照元素在原來的位置作相對移動。但它畢竟是層模型布局的元素，如果與其它元素重疊，它將顯示在非層模型布局的元素的上方。另外設(shè)置了relative之后，元素便具有了完整的盒模型，即便是內(nèi)聯(lián)元素，設(shè)置高度、上下補白，上下邊界也變得有效了，并且這些設(shè)置將體現(xiàn)在其在文檔流中所占據(jù)的空間上。

流動模型

 流動（Flow）是默認的網(wǎng)頁布局模式。任何沒有具體定義position:absolute?或position:fixed?屬性，以及沒有被定義浮動float:left?或float:right?的元素都將默認呈現(xiàn)流

動布局模式。

流動布局模型具有4個比較典型的特征：

1、塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據(jù)位置，不

管這個元素所包含的內(nèi)容有多少，也不管我們把元素的寬度設(shè)置多窄。

2、內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。有人把這種分布方式稱為文本流，文本流源于文本的從左向右自然流動，本質(zhì)上它與HTTP傳輸方式和瀏覽器的解析機制密切相關(guān)。超出一行后，會自動從上而下?lián)Q行顯示，然后繼續(xù)從左到右按順序流動，以此類推。當然，讀者可以利用CSS文本屬性強制改變文本流動方向。

3、相鄰的兩塊狀元素或嵌套的塊狀元素如果定義了上下外邊距會發(fā)生重疊，重疊的結(jié)果是兩者之中的最大值。針對嵌套的重疊現(xiàn)象，可以通過定義父元素的overflow屬性值為“auto”來阻止這種重疊。

4、浮動元素不會發(fā)生外邊距重疊，而浮動與塊狀元素接觸時，通過后出現(xiàn)的元素來決定是否重疊。從編程的角度講，修改已經(jīng)構(gòu)建好的dom樹，倒不如通過決定下一個元素如何顯示來的效率要高。如果浮動元素是塊狀元素的父元素，根據(jù)上邊的規(guī)則是應(yīng)該重疊的，但是浮動元素會自動計算內(nèi)部的高度寬度，所以結(jié)果外邊距不會發(fā)生重疊。

浮動模型

浮動是完全不同于流動的另一種布局模型，它遵循浮動規(guī)則，但仍能看到流動對它的潛在影響。任何元素在默認情況下是不能夠浮動的，但都可以用CSS定義為浮動，如div、list、p、table，以及img等元素都可以被定義為浮動，事實上即使是如span、strong等這樣的內(nèi)聯(lián)元素也可以被定義為浮動。

浮動布局模型具有下面幾個特征：

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

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

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

4、與普通元素一樣，浮動元素始終位于包含元素內(nèi)，不會游離于外，或破壞元素包含關(guān)系，這與層布局模型不同。

5、關(guān)于流動元素環(huán)繞問題。雖然浮動元素能夠隨文檔流動，但浮動模型與流動模型依然存在本質(zhì)區(qū)別。浮動元素的后面的內(nèi)聯(lián)元素都能夠以流的形式環(huán)繞浮動元素左右，甚至與上面的文本流連成一體。而塊狀元素則不同，它會忽視所有浮動元素所占據(jù)的空間，好像這個浮動元素根本就不存在，依這種方式確定自己在流動模型中的位置。

6、關(guān)于浮動元素間并列顯示問題。當兩個或者兩個以上的相鄰元素都被定義為浮動顯示時，如果存在足夠的空間容納它們，浮動元素之間可以并列顯示。它們的上邊線是在同一水平線上的。如果沒有足夠的空間，那么后面的浮動元素將會下移到能夠容納它的地方，這個向下移動的元素有可能產(chǎn)生一個單獨的浮動。很多設(shè)計師喜歡使用浮動模型來布局網(wǎng)頁，原因就在于它能夠突破流動模型布局中塊狀元素不能并列顯示的問題。

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

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

8、總結(jié)：浮動元素仍然處于文檔流之中，以文檔流元素為自己定位，但是它不占用文檔流的空間。

浮動清除

 只有塊狀元素可以定義清除屬性，對內(nèi)聯(lián)元素定義清除無效。一個塊狀元素設(shè)置"clear:both"后，會保證當其被解析時左右不會出現(xiàn)浮動元素。但如

果它是浮動元素（設(shè)置了float屬性），后面的浮動元素仍有可能浮動在其左右。 當一個浮動元素定義了clear屬性，它不會對前面的任何對象產(chǎn)生影響，也不會對后面的對象形成影響，只會影響自己的布局位置。這里的影響是指不會主動改變別的對象的位置。

 注：個人感覺，這個屬性中文名翻譯為“干凈”更好，他表示當前元素在其被解析時

保證哪邊是干凈的，沒有漂浮物的。

浮動嵌套

浮動元素可以相互嵌套，嵌套規(guī)律與流動元素嵌套相同。浮動的包含元素總會自動調(diào)整自身高度和寬度以實現(xiàn)對浮動子元素的包含。 定義了“float”的元素會自動計算元素內(nèi)浮動元素所占的寬高，使之與其內(nèi)的內(nèi)容適應(yīng)。沒有定義該屬性則不能自動計算寬高，導(dǎo)致父元素寬高顯示不正常。也可以通過定義父元素的overflow屬性為“auto”來自動擴展元素的寬高。

浮動與流動嵌套

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

層模型

層布局模型源于圖形圖像編輯器中非常流行的圖層編輯功能，圖層能夠精確操作和編輯圖像而廣受平面設(shè)計師的歡迎，但在網(wǎng)頁設(shè)計領(lǐng)域，由于網(wǎng)頁大小的活動性，層布

局沒能受到熱捧。為了支持層布局模型，CSS定義了一組定位（positioning）屬性。元素定位的設(shè)計思路非常簡單，它允許用戶精確定義網(wǎng)頁元素的相對位置，這里的相對可以相對元素原來顯示的位置，或者是相對最近的包含塊元素，或者是相對瀏覽器窗口。

定位類型

1.static：表示不定位，元素遵循HTML默認的流動模型，如果未顯式聲明元素的定位類型，則默認為該值。

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

3.fixed：表示固定定位，與absolute定位類型類似，但它的包含塊是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與backgroundattachment:fixed?屬性功能相同。

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

方式生成一個元素，然后移動這個元素，移動方向和幅度由left、right、top、bottom屬性確定，元素的形狀和偏移前的位置保留不動