鄭偉

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

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

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）28-0220-03

1 背景

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

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

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

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

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

通過(guò)比較可見(jiàn)，浮動(dòng)布局是比較適用的一種布局方式。

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

2.1 盒模型

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

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

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

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

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

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

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

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

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

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

2.3 盒元素的分類(lèi)

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

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

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

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

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

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

3.1 浮動(dòng)屬性float

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

3.2 浮動(dòng)元素的特點(diǎn)

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

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

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

如圖2所示：

4 消除浮動(dòng)的連帶影響

如果僅僅掌握f(shuō)loat屬性的使用方法是無(wú)法正確地完全網(wǎng)頁(yè)布局的，因?yàn)楦?dòng)元素脫離文檔流對(duì)文檔內(nèi)容的重新排列產(chǎn)生了一系列的影響，如圖3所示：

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

1）clear屬性解決方案

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

2）父層overflow屬性解決方案

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

3）給浮動(dòng)元素強(qiáng)制定義固定高度

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

4 實(shí)戰(zhàn)驗(yàn)證

這里我們以一個(gè)導(dǎo)航條的制作為例，來(lái)詳細(xì)說(shuō)明一下浮動(dòng)的用法。我們將實(shí)現(xiàn)如圖4的導(dǎo)航條效果。

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

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

接著便可以通過(guò)CSS樣式來(lái)對(duì)標(biāo)簽進(jìn)行修飾，具體代碼如下：

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

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

#nav{background-color：#}

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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