Web頁面布局技術主要css2.0中主要出現了浮動布局與定位，以及css3中新的布局方式彈性布局。

對于web頁面布局史中，浮動與定位統治了所有頁面的布局。定位有不可替代的優點，主要的優點是可以實現多層級結構，且子元素的位置不局限于父元素的范圍內。

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

影響一，浮動元素會脫離文檔流，使用浮動技術后，還要清除浮動的影響。

圖1：元素浮動

圖2：清除浮動

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

圖3：精確計算實現等距分隔

由于浮動技術有很多的缺點，所以將會受到很大的沖擊，它的對手將是彈性布局。彈性布局主要作用是，設置父元素內的多個塊元素的排列順序以及分布方式。

彈性布局與浮動相比，不但可以實現多個塊元素共存于一行，而且對父元素沒有不好的影響，同時實現子元素等距分隔，或等距環繞并不需要人為的計算。彈性布局會自動計算。

圖4：彈性布局

圖5：實現等距離分隔

結束語：

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