web浮動布局與彈性布局有什么區(qū)別

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

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

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

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

圖1：元素浮動

圖2：清除浮動

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

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

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

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

圖4：彈性布局

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

結(jié)束語：

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