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

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

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

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

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

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

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

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

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

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

圖4：彈性布局

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

結(jié)束語：

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