岳丹丹

（興義民族師范學院， 貴州 興義 562400）

網(wǎng)頁浮動布局方式和伸縮盒布局方式的比較研究

岳丹丹

（興義民族師范學院， 貴州 興義 562400）

浮動布局方式是當下流行的網(wǎng)頁布局技術(shù)，伸縮盒布局方式是較新的網(wǎng)頁布局技術(shù)，對浮動布局方式和伸縮盒布局方式進行了比較研究，用簡潔的代碼實例闡述了伸縮盒布局的優(yōu)勢所在。

網(wǎng)頁布局、浮動布局float、伸縮盒布局Flexbox

Abstract:Float layout is the popular web development technology,the layout of the flexbox is a relatively new web technology.This paper compares float with flexboxlayout in web application research,and some simple example are given toillustrate the advantage offlexboxmethod.

Key words:Web layout；float；flexbox

網(wǎng)絡技術(shù)的迅速發(fā)展，使得網(wǎng)絡技術(shù)融入到了人們的日常生活、工作和學習中。互聯(lián)網(wǎng)上各種網(wǎng)站和基于Web的應用大量涌現(xiàn)，這些都需要用網(wǎng)頁形式進行呈現(xiàn)。網(wǎng)頁布局設計指的是根據(jù)網(wǎng)站內(nèi)容和建站目的等基本要素，運用版面設計原理，將網(wǎng)頁上的視覺元素進行合理配置與表現(xiàn)的過程。[1]在網(wǎng)站規(guī)劃建設中，網(wǎng)頁布局設計是至關(guān)重要的環(huán)節(jié)，網(wǎng)頁布局設計是否美觀、規(guī)范、合理，關(guān)系到網(wǎng)站能否吸引更多人的眼球，直接反映網(wǎng)站的點擊率正是網(wǎng)站的生命所在。所以網(wǎng)頁布局越來越受到重視。

一、網(wǎng)頁浮動布局方式和伸縮盒布局方式的比較

網(wǎng)頁浮動布局是目前常用的網(wǎng)頁布局方式，許多主流網(wǎng)站都采用浮動布局的方式實現(xiàn)布局。伸縮盒布局方式是較新的技術(shù)，目前主要在移動web中使用。下面對兩種布局方式進行比較。

1.浮動布局

浮動（float）是基于CSS的現(xiàn)代Web設計用到的主要功能之一，可以用它來創(chuàng)建多列的網(wǎng)頁布局，如無序列表創(chuàng)建導航工具條，不是用table而又可創(chuàng)建類似表格的對其方式等。實現(xiàn)方法主要是：使用float屬性。float屬性的取值是：none（不浮動），left（向左浮動），right（向右浮動），使元素浮動到左邊或者右邊而成為一排。浮動可以應用于任何元素。使用float屬性后，浮動的元素從正常文檔流中脫離出來，同時對布局中的其他元素造成一定的影響。

浮動布局的局限：1）浮動成行的每個塊元素的高度必須要一致，否則就會出現(xiàn)“鋸齒相錯”，例如一個左浮動列表布局，如果第一行有個列表高度高于其他列表，那就在第二行，第一個元素會沿著最高元素的右側(cè)對齊。2）浮動會使當前標簽產(chǎn)生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及width、height屬性，會出現(xiàn)高度塌陷、換行等問題，需要修復其帶來的副作用。

浮動布局簡單易學，容易掌握，由于網(wǎng)站總體布局改動的幾率較小，所以目前PC網(wǎng)站大多仍然使用浮動布局方式。

2.伸縮盒布局

Flexbox（伸縮盒布局）是CSS3中一個新的布局模式，為了現(xiàn)代網(wǎng)絡中更為復雜的網(wǎng)頁需求而設計。Flexbox由伸縮容器和伸縮項目組成，通過設置元素的display屬性為flex可以得到一個伸縮容器。設置為flex的容器被渲染為一個塊級元素，同時可以在不使用浮動（float）和定位（position）的情況下實現(xiàn)塊級（block）元素的水平排列，并且可以把父元素的寬度按照比例分配子元素且子元素自適應高度。[2]

Flexbox（伸縮盒布局）的優(yōu)勢：輕松實現(xiàn)自適應、獨立的高度控制與對齊、獨立的元素順序、指定元素之間的關(guān)系、靈活的尺寸與對齊方式等。這些功能在以前的實現(xiàn)方式是使用表格、浮動、行內(nèi)塊元素和其他CSS屬性來配合完成。Flexbox（伸縮盒布局）使得這些布局工作變得輕松起來。同時，PC瀏覽器網(wǎng)頁必須優(yōu)化以適應于智能手機屏幕的場景。不僅僅需要元素減小尺寸，它們排列的順序方式也必須改變。Flexbox（伸縮盒布局）很容易實現(xiàn)這種需求。

Flexbox（伸縮盒布局）的不足：Flexbox（伸縮盒布局）規(guī)范的相關(guān)工作從2009發(fā)布到2012年9月最終定下來，W3C認為當前的語法是穩(wěn)定的，并鼓勵瀏覽器開發(fā)商去實現(xiàn)它。最新版本2012年版，除了Safari瀏覽器不支持外，其他最新瀏覽器都支持這個版本。但很多瀏覽器廠商都擁有一個私有前綴，增加了使用時的麻煩。

二、布局網(wǎng)頁實例比較

網(wǎng)頁設計中，橫向三列布局在網(wǎng)頁布局中經(jīng)常會使用，下面通過用兩種方式實現(xiàn)橫向三列布局來進行比較。

網(wǎng)頁主體結(jié)構(gòu)代碼如下：

代碼說明：主體部分主要分為三塊，標準文檔流下三塊默認為垂直排列。如圖1所示。

圖1 默認文檔流布局

1.浮動布局

浮動布局代碼如下：

實現(xiàn)效果如圖2所示：

圖2 浮動布局效果

當去掉/*padding:10px;*/行的注釋，即增加文本的填充距離時，會出現(xiàn)錯位和換行的情況，如圖3。

圖3 增加文本填充距離的效果

2.伸縮盒布局

伸縮盒布局實現(xiàn)代碼如下：