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

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

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

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

position：relative

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

流動(dòng)模型

流動(dòng)（Flow）是預(yù)設(shè)的網(wǎng)頁(yè)佈局模式。任何沒(méi)有具體定義position:absolute;或position:fixed;屬性，以及沒(méi)有被定義浮動(dòng)float:left;或float:right;的元素都將預(yù)設(shè)呈現(xiàn)流

4個(gè)比較典型的特徵：

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

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

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

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

浮動(dòng)模型

浮動(dòng)是另一個(gè)完全不同於流動(dòng)的佈局模型，它遵循浮動(dòng)規(guī)則，但仍能看到流動(dòng)對(duì)它的潛在影響。任何元素在預(yù)設(shè)情況下是不能夠浮動(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è)定為區(qū)塊狀顯示。這樣就具有了完整的盒子模型。

2、如果當(dāng)我們沒(méi)有指定浮動(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)，它的上邊線(xiàn)將與未被聲明為浮動(dòng)時(shí)的位置一樣。但是在水平方向上，它的浮向邊會(huì)盡可能地靠近包含它的元素的邊緣（這個(gè)邊緣是指包含元素補(bǔ)白的內(nèi)邊緣）。

4、與普通元素一樣，浮動(dòng)元素總是位於包含元素內(nèi)，不會(huì)遊離於外，或破壞元素包含關(guān)係，這與層佈局模型不同。

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

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

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

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

8、總結(jié)：浮動(dòng)元素仍然處?kù)段募鞒讨?，以文件流程元素為自己定位，但是它不?zhàn)用文件流程的空間。

?

浮動(dòng)清除

#?只有區(qū)塊狀元素可以定義清除屬性，對(duì)內(nèi)聯(lián)元素定義清除無(wú)效。一個(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ì)前面的任何物件產(chǎn)生影響，也不會(huì)對(duì)後面的物件形成影響，只會(huì)影響自己的佈局位置。這裡的影響是指不會(huì)主動(dòng)改變別的物件的位置。

?註：個(gè)人感覺(jué)，這個(gè)屬性中文名翻譯為「乾淨(jìng)」更好，他表示當(dāng)前元素在其被解析時(shí)

保證哪邊是乾淨(jìng)的，沒(méi)有漂浮物的。

浮動(dòng)巢狀

浮動(dòng)元素可以相互嵌套，嵌套規(guī)律與流動(dòng)元素嵌套相同。浮動(dòng)的包含元素總是會(huì)自動(dòng)調(diào)整自身高度和寬度以實(shí)現(xiàn)浮動(dòng)子元素的包含。 ?定義了「float」的元素會(huì)自動(dòng)計(jì)算元素內(nèi)浮動(dòng)元素所佔(zhàn)的寬高，使其與其內(nèi)的內(nèi)容適應(yīng)。沒(méi)有定義該屬性則無(wú)法自動(dòng)計(jì)算寬高，導(dǎo)致父元素寬高顯示不正常。也可以透過(guò)定義父元素的overflow屬性為「auto」來(lái)自動(dòng)擴(kuò)充元素的寬高。

浮動(dòng)與流動(dòng)巢狀

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

層模型

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

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

定位類(lèi)型

1.static：表示不定位，元素遵循HTML預(yù)設(shè)的流動(dòng)模型，如果未明確宣告元素的定位類(lèi)別型，則預(yù)設(shè)為該值。

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

3.fixed：表示固定定位，與absolute定位類(lèi)型類(lèi)似，但它的包含區(qū)塊是視圖（螢?zāi)粌?nèi)的網(wǎng)頁(yè)視窗）本身。由於視圖本身是固定的，它不會(huì)隨瀏覽器視窗的捲軸滾動(dòng)而變化，除非你在螢?zāi)恢幸苿?dòng)瀏覽器視窗的螢?zāi)晃恢?，或改變?yōu)g覽器視窗的顯示大小，因此固定定位的元素會(huì)永遠(yuǎn)位於瀏覽器視窗內(nèi)視圖的某個(gè)位置，不會(huì)受文件流影響，這與backgroundattachment:fixed;屬性功能相同。

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

方式產(chǎn)生一個(gè)元素，然後移動(dòng)這個(gè)元素，移動(dòng)方向和振幅由left、right、top、##bottom

##屬性確