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

1、流動(dòng)模型（position:static）

?2、浮動(dòng)模型(float:left、right)?

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

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

?position：relative

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

流動(dòng)模型

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

動(dòng)布局模式。

流動(dòng)布局模型具有4個(gè)比較典型的特征：

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

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

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

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

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

浮動(dòng)模型

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

浮動(dòng)布局模型具有下面幾個(gè)特征：

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

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

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

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

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

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

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

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

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

?

浮動(dòng)清除

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

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

?注：個(gè)人感覺，這個(gè)屬性中文名翻譯為“干凈”更好，他表示當(dāng)前元素在其被解析時(shí)

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

浮動(dòng)嵌套

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

浮動(dòng)與流動(dòng)嵌套

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

層模型

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

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

定位類型

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

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

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

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

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