這是一個(gè)三欄的布局，并且是居中顯現(xiàn)的。其間，A欄是主體內(nèi)容欄，B欄和C欄都是側(cè)邊欄。首先，咱們不可能直接用必定定位將A、B、C三欄定位到居中的方位，由于每個(gè)人顯現(xiàn)器的分辨率是不同的，在1024X768分辨率的顯現(xiàn)器上定位的居中作用，在別的分辨率的顯現(xiàn)器上看到的作用必定不會(huì)是居中顯現(xiàn)的，那么，該怎么處理這個(gè)問(wèn)題呢？

 

　　幸好，在必定定位模型中有個(gè)極為有用的特性，那就是：若某個(gè)必定定位元素的容器也被定位過(guò)，那么該元素指定的top和left值將不會(huì)依據(jù)文檔的根元素html（也就是瀏覽器窗口的左上角）核算，而是會(huì)依據(jù)其容器的左上角核算這個(gè)偏移量。換句話說(shuō)，也就是：被定位過(guò)的容器將扮演其間一切元素必定定位起始點(diǎn)的角色。

 

　　所以，運(yùn)用這個(gè)特性，咱們給A、B、C欄的外部加上一個(gè)容器D，如下圖：

 

　　然后，咱們讓容器D居中，并給它加上一個(gè)特點(diǎn)：position:relative，這樣，再用必定定位定位A、B、C的top和left值，A、B、C的方位就會(huì)依據(jù)容器D的左上角的方位來(lái)核算了，這樣就能夠完成咱們希望的三欄居中的作用了。

 

　　可是，咱們常用的布局并沒(méi)有這么簡(jiǎn)略，除了三欄之外，咱們還需求一個(gè)頁(yè)頭和一個(gè)頁(yè)腳，如下圖：

 

　　這時(shí)候，再用必定定位布局就行不通了，由于必定定位的元素會(huì)從文檔流中完全移除，這時(shí)，頁(yè)腳會(huì)緊挨著頁(yè)頭，顯現(xiàn)在頁(yè)頭的下方。

 

　　如果咱們一定要選用必定定位的話，那么有必要預(yù)先知道這三欄中每一欄的高度，然后再依據(jù)其間高的一欄定位頁(yè)腳。若是任意一欄中的文本長(zhǎng)度無(wú)法確定的話，除了運(yùn)用JavaScript，咱們也只能放棄必定定位的想法，轉(zhuǎn)而投入到起浮布局的懷有。

 

　　2、起浮

 

　　起浮的本意是要將插入到文章中的圖片向左或許向右起浮，使圖片下方的文字自動(dòng)環(huán)繞在它的周?chē)�，使圖片的左邊或許右邊不會(huì)出現(xiàn)一大塊的留白。

 

　　起浮的語(yǔ)法雖然簡(jiǎn)略，但卻不那么容易把握，下面讓咱們舉例闡明怎么用起浮來(lái)進(jìn)行布局。相同，咱們要完成一個(gè)帶頁(yè)腳的三欄布局。如下圖：

 

　　怎么用起浮完成這樣的作用呢？其實(shí)很簡(jiǎn)略：

 

　　1、設(shè)定E的寬度，讓E居中

 

　　2、設(shè)定A、B、C的寬度，將A、B、C分別向左起浮

 

　　3、給頁(yè)腳設(shè)置clear特點(diǎn)

 

　　需求闡明的是，起浮布局仍然遵從慣例文檔流，所以與必定定位比較，起浮定位時(shí)HTML源文件中元素聲明的方位顯得分外重要。 當(dāng)然，處理這個(gè)問(wèn)題的簡(jiǎn)略的辦法就是在源文件中交換左欄和右欄的聲明次第，也有辦法不必交換各欄的次第也能夠完成相同的布局，可是，這就要用到一種比較不流暢的運(yùn)用負(fù)邊距值的辦法。一般情況下，人們十有八九會(huì)選擇交換源文件中左中兩欄的聲明次第。