Web頁(yè)面布局技術(shù)主要css2.0中主要出現(xiàn)了浮動(dòng)布局與定位，以及css3中新的布局方式彈性布局。

對(duì)于web頁(yè)面布局史中，浮動(dòng)與定位統(tǒng)治了所有頁(yè)面的布局。定位有不可替代的優(yōu)點(diǎn)，主要的優(yōu)點(diǎn)是可以實(shí)現(xiàn)多層級(jí)結(jié)構(gòu)，且子元素的位置不局限于父元素的范圍內(nèi)。

浮動(dòng)布局主要用于解決多個(gè)塊元素共存于一行的問(wèn)題。雖然浮動(dòng)可以解決多個(gè)塊元素共存一行的問(wèn)題，但是也會(huì)有非常不好的影響。

影響一，浮動(dòng)元素會(huì)脫離文檔流，使用浮動(dòng)技術(shù)后，還要清除浮動(dòng)的影響。

圖1：元素浮動(dòng)

圖2：清除浮動(dòng)

影響二，在多個(gè)塊元素共存于一行后，在塊元素的寬度無(wú)法達(dá)到父元素的寬度時(shí)，為了美觀，會(huì)采用等距分隔或等距環(huán)繞設(shè)計(jì)。對(duì)于這樣的設(shè)計(jì)，則需要人為的，精確的計(jì)算塊元素的外邊距。

圖3：精確計(jì)算實(shí)現(xiàn)等距分隔

由于浮動(dòng)技術(shù)有很多的缺點(diǎn)，所以將會(huì)受到很大的沖擊，它的對(duì)手將是彈性布局。彈性布局主要作用是，設(shè)置父元素內(nèi)的多個(gè)塊元素的排列順序以及分布方式。

彈性布局與浮動(dòng)相比，不但可以實(shí)現(xiàn)多個(gè)塊元素共存于一行，而且對(duì)父元素沒(méi)有不好的影響，同時(shí)實(shí)現(xiàn)子元素等距分隔，或等距環(huán)繞并不需要人為的計(jì)算。彈性布局會(huì)自動(dòng)計(jì)算。

圖4：彈性布局

圖5：實(shí)現(xiàn)等距離分隔

結(jié)束語(yǔ)：

望此文成為一盞明燈，指引你們來(lái)時(shí)的路。