對網(wǎng)頁浮動布局技術(shù)應(yīng)用的深入研究

鄭偉

摘要：網(wǎng)頁布局是網(wǎng)頁制作過程中非常重要的技術(shù)環(huán)節(jié)，也是網(wǎng)頁制作過程中難度較大的一個部分。如何正確合理地進行網(wǎng)頁布局無論是對于網(wǎng)頁內(nèi)容的合理呈現(xiàn)還是對于提升網(wǎng)頁整體的美觀程度都是非常重要的。浮動布局作為當(dāng)下網(wǎng)頁制作中最主流的一種布局技術(shù)在實際應(yīng)用中被廣泛采納，該文通過對浮動原理的分析、浮動問題的提出與解決及浮動案例的展示進行深入的探討和研究。

關(guān)鍵詞：浮動布局；盒子模型；浮動；float

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2016）28-0220-03

1 背景

隨著互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)站已成為信息傳播和共享的重要媒介之一，一個好的網(wǎng)站不僅要有好的信息數(shù)據(jù)，如何將數(shù)據(jù)有效的呈現(xiàn)和傳遞給用戶同樣是不可忽視的。如何將數(shù)據(jù)更加有效的呈現(xiàn)出來呢？影響的因素主要在2個方面，一是網(wǎng)頁界面的圖形設(shè)計，包括顏色、形狀、風(fēng)格等，另一個因素就是內(nèi)容的布局了，這直接影響到用戶對數(shù)據(jù)的閱讀[3]。

網(wǎng)頁布局是網(wǎng)頁制作中必不可少的技術(shù)環(huán)節(jié)，也是網(wǎng)頁制作中最容易出現(xiàn)問題的地方。通過網(wǎng)頁技術(shù)的發(fā)展過程來看，網(wǎng)頁布局主要經(jīng)歷了以下幾個技術(shù)發(fā)展階段：

文檔流布局：這種布局主要出現(xiàn)在網(wǎng)頁發(fā)展的早期，頁面內(nèi)容以大量文字和極少圖片構(gòu)成，利用頁面默認(rèn)的排列方式，即從左到右，從上到下的原則對內(nèi)容進行原始呈現(xiàn)，其特點是簡單易實現(xiàn)，缺點是無法實現(xiàn)多媒體下的復(fù)雜布局。

表格布局：此種布局是專為解決文檔流布局的缺陷而發(fā)明的一種布局方式，就是利用表格的網(wǎng)格排列來實現(xiàn)對內(nèi)容的擺放，這種布局的特點是應(yīng)用直觀，容易上手，缺點是網(wǎng)格彼此關(guān)聯(lián)性太強，效率太低，維護成本過高。其實表格布局是一種對表格的錯誤應(yīng)用，表格是用來批量呈現(xiàn)具有相同特點的數(shù)據(jù)的，類似excel表格。

浮動布局：有的書本上也稱為div+css布局[2]。此布局是將網(wǎng)頁元素看成一個個獨立的盒子，通過盒子的自由排列實現(xiàn)布局，這種布局的特點是排列的個體比較獨立，易操作和維護，效率較高，缺點是難度相對略大。

通過比較可見，浮動布局是比較適用的一種布局方式。

2 網(wǎng)頁布局中的盒子元素

2.1 盒模型

要正常進行網(wǎng)頁布局就不得不首先了解盒模型的概念。何為盒模型？盒子只是一個容器，用來盛放網(wǎng)頁呈現(xiàn)的內(nèi)容，所以通俗的講，就是將網(wǎng)頁里面具有高寬屬性的元素看成一個盒子容器，通過控制盒子的大小、坐標(biāo)等屬性，合理排列盒子的位置，實現(xiàn)正常的網(wǎng)頁布局[6]。

2.2 盒模型的標(biāo)準(zhǔn)

因為技術(shù)發(fā)展的歷史原因，網(wǎng)頁標(biāo)準(zhǔn)在瀏覽器的競爭中沒有實現(xiàn)徹底的統(tǒng)一起來[4]，盒子模型同樣如此，不同瀏覽器都有自己對盒模型的解釋標(biāo)準(zhǔn)，一方面是以IE為代表的盒模型標(biāo)準(zhǔn)，另外一方面是以W3C標(biāo)準(zhǔn)為代表的標(biāo)準(zhǔn)盒模型。如圖1：

W3C盒模型標(biāo)準(zhǔn)

盒子的實際寬度=邊框?qū)挾龋╞order-width左右） + 內(nèi)邊距（padding左右）+ width

盒子的實際高度=邊框高度（border-width上下） + 內(nèi)邊距（padding上下）+ height

IE盒子模標(biāo)準(zhǔn)

盒子的實際寬度=邊框?qū)挾龋╞order-width左右） + width

盒子的實際高度=邊框高度（border-width上下） + height

如何在所有瀏覽器中實現(xiàn)統(tǒng)一的盒模型標(biāo)準(zhǔn)呢？這與網(wǎng)頁文檔中的文檔聲明doctype有很大關(guān)系。當(dāng)網(wǎng)頁中顯示聲明了doctype文檔聲明，則瀏覽器會按照W3C標(biāo)準(zhǔn)盒模型解析，反之則瀏覽器會按照自己的標(biāo)準(zhǔn)解析盒模型。

2.3 盒元素的分類

網(wǎng)頁中的盒元素可分為塊狀元素與行內(nèi)元素。

塊狀元素：默認(rèn)情況下，具有自動換行特點，通俗講就是獨占一行，具有標(biāo)準(zhǔn)盒子模型的所有屬性。

行內(nèi)元素：顧名思義，就是一行里面的元素，其特點當(dāng)然就是能與其他行內(nèi)元素同在一行排列，并且默認(rèn)情況下無法改變大小。

行內(nèi)塊狀元素：從字面意思可以理解，這類元素既有行內(nèi)元素一行排列的特征，也有塊狀元素具有改變大小的特點。

3 盒元素在網(wǎng)頁中的浮動

通過盒模型的特點可發(fā)現(xiàn)一個難題：讓一個可以設(shè)置大小的元素橫著排列似乎不太容易。通過網(wǎng)頁元素在頁面中排列的方式可以將網(wǎng)頁布局分為很多種，例如流式布局、浮動布局、彈性布局等等。其中，浮動是布局中最常用的一種方式。

3.1 浮動屬性float

一個元素如果浮動，將會產(chǎn)生什么效果呢？浮動的元素會脫離原來的文檔流，向左或者向右排了，CSS屬性中的表示為float，屬性值為：left、right、none、inherit，分別表示向左浮動、向右浮動、無、繼承父層浮動屬性

3.2 浮動元素的特點

1）無論是行內(nèi)盒子還是塊狀盒子，浮動后的盒子都具有可控的大小屬性。

2）一個浮動元素只能與相鄰的浮動元素產(chǎn)生向左或者向右的浮動橫向排列，直到第一個浮動元素碰到其父層元素的內(nèi)邊緣[1]。

3）因為浮動元素脫離文檔流而不占位置，其留出的空間只能被其相鄰的塊狀元素占用，而相鄰的行內(nèi)元素則會與其形成環(huán)繞效果[1]。

如圖2所示：

4 消除浮動的連帶影響

如果僅僅掌握float屬性的使用方法是無法正確地完全網(wǎng)頁布局的，因為浮動元素脫離文檔流對文檔內(nèi)容的重新排列產(chǎn)生了一系列的影響，如圖3所示：

由上圖可以看到，因為浮動造成了元素之間產(chǎn)生了錯誤的排列，而這一切的根本原因就是浮動元素脫離文檔流而不占用文檔中的空間，使得浮動元素的父層無法捕捉到浮動元素的大小造成空間大小上的計算誤差。如何解決這個問題呢？這里主要介紹三種常見的方法：

1）clear屬性解決方案

如果一個容器內(nèi)，有元素使用了浮動，那么只需在此容器的末尾添加一個空的塊狀盒子，如div等，給此空盒子添加樣式清除屬性clear，格式如下：

2）父層overflow屬性解決方案

此種情況只能使用在容器中的所有元素都浮動的情況下，此時只需要在浮動元素的父層上添加overflow屬性即可，格式如下：

3）給浮動元素強制定義固定高度

此種方法是效率最底下、最不建議使用的一種辦法，但也是解決問題最直接的一種方法，建議盡量不要固定元素的高度，要保證網(wǎng)頁在垂直方向上能根據(jù)內(nèi)容的多少自適應(yīng)大小，以免發(fā)生內(nèi)容溢出的現(xiàn)象。

4 實戰(zhàn)驗證

這里我們以一個導(dǎo)航條的制作為例，來詳細說明一下浮動的用法。我們將實現(xiàn)如圖4的導(dǎo)航條效果。

大多數(shù)情況下，頁面的導(dǎo)航條都會使用列表來表示[5]。列表是用來表示具有相同特征的一類數(shù)據(jù)的最佳選擇，而導(dǎo)航按鈕正是滿足這種特征。由于導(dǎo)航按鈕沒有必要的先后順序，因此通常情況下，使用無序列表ul來表示導(dǎo)航條。

導(dǎo)航條的HTML結(jié)構(gòu)與瀏覽器運行效果如圖5所示：

接著便可以通過CSS樣式來對標(biāo)簽進行修飾，具體代碼如下：

#nav li{ float：left； width：100px； text-align：center； line-height：50px；}

以上代碼是將每個導(dǎo)航按鈕設(shè)置為100像素寬度，文本在按鈕中水平與垂直居中，并通過float屬性將所有的按鈕排成一行。接下來就給整個導(dǎo)航條設(shè)置一個背景顏色，非常簡單，代碼如下：

#nav{background-color：#}

做到這里，我們就可以在瀏覽器里面看到導(dǎo)航條效果了。是真的嗎？當(dāng)你運行時，你會驚奇地發(fā)現(xiàn)，并沒有出現(xiàn)藍色的背景，如圖6所示：

為什么會這樣呢？這正如我們在圖3看到的最后一種情況，所有的li都浮動了，對于ul來說，li是沒有大小的，因而，此刻ul的高度實際是為0的，當(dāng)然也就看不到背景顏色了，如何解決呢？答案是很簡單的，針對前面第三節(jié)講的解決浮動影響的3種方法，這里我們選擇第2種方法，所有子元素都浮動的情況下，只需在父層添加overflow：hidden即可。最終修改后的樣式為 #nav{background-color：#；overflow：hidden；}，至此就可以看到圖4一樣的效果了。

5 結(jié)束語

通過上述對浮動的分析和案例演示，我們可以清楚地了解到浮動的原理及解決方案，總體難度并不大，只是需要使用者認(rèn)真的分析和理解浮動布局的實際情況，按情況解決問題即可。浮動布局是網(wǎng)頁布局中的一種重要的布局方式，也是比較流行和成熟的布局方式，熟練理解和掌握是十分有必要的！

參考文獻：

[1] W3school[EB/OL].http：//http：//www.w3school.com.cn.

[2] 謝冠懷. 辨析響應(yīng)式網(wǎng)頁的浮動布局和伸縮盒子布局[J]. 現(xiàn)代計算機： 專業(yè)版， 2014（10）： 42-46.