現如今網絡是我們每個人都會接觸到的東西，我們平時上網所看到的網頁都是由計算機專業技術人員精心設計制作的。我們隨手點開的一個頁面可能包含了很多技術，頁面的排版，文章的處理，圖片的制作等。本文是一篇論文發表核心期刊投稿的計算機網頁制作技術論文，主要論述了基于CSS+DIV的float技術在網頁制作中的應用。 

　　摘 要：本文主要描述基于CSS+DIV的float技術在文本環繞、頁面布局和頁面導航中的應用，對設置浮動元素產生的影響采用clear進行清除處理。Float技術不但對整個頁面布局進行規劃，也可以對一些基本元素如導航等進行排列，是網頁制作中非常重要的方法。

　　關鍵詞：論文發表核心期刊,CSS+DIV,float,clear

　　1 引言(Introduction)

　　早期的網頁采用進行排版，存在各種各樣的問題，比如：升級困難、代碼的修改和維護費時費力等。CSS+DIV是目前比較流行的網頁布局技術，它使得內容和樣式完全分離，在修改頁面時不需要關心任何后臺操作的問題，其中的float更是網頁制作中不可缺少的部分[1-3]。

　　可以將float值設置為left、right或者默認值none，設置浮動定位后，浮動的框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。float取值為none則不會發生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示。

　　2 Float在文本環繞中的應用(Application of float in

　　the text around)

　　網頁中經常能看到文字環繞圖片的效果，通常把這種方式稱“文本環繞”。在網頁設計中，使用了CSS的float屬性的頁面元素就像在印刷布局里面被文本環繞的圖片一樣。浮動的本意是要將插入到文章中的圖片向左或者向右浮動，使圖片下方的文字自動環繞在它的周圍，使圖片的左邊或者右邊不會出現一大塊的留白。

　　文本環繞的html代碼如下：

　　得到的效果圖如圖1所示，可以看出文字并沒有環繞圖片，盡管圖片右側存在大塊的空白，原因是是個塊級元素。塊級元素的特點是，獨自占滿整個一行，即使它的右側有大塊空白，在它之后的元素也只能顯示在它的下面一行。

　　如果想要將圖片右側的區域空出來，文字顯示在圖片右側區域，則需要設置img{float：left;}，圖片將向左側浮動，直到碰到包含它的框為止，效果如圖2所示。

　　從圖2可以看出，雖然文字顯示在了圖片右側，但是圖片跑出了包含它的盒子。這是因為浮動的元素會脫離當前文檔，就像頁面中沒有該元素一樣，不占用頁面空間，此時如果再添加內容，會顯示在浮動圖片的后面，被圖片蓋住，顯然不是我們需要的效果。為了清除浮動圖片造成的影響，在文字的下方添加空盒子，html代碼如下：

　　同時在樣式中定義.clear{clear：left}，因為對該盒子不設置寬、高等樣式，也不放置任何內容，所以不占用任何空間，不影響布局，只起到一個清除的作用。清除之后的效果如圖3所示。

　　設置clear：left是清除左浮動造成的影響，right是清除右浮動造成的影響，清除最常用的是clear：both，清楚左右浮動造成的影響。

　　3 Float在網頁布局中的應用(Application of float in

　　the webpage layout)

　　應用Web標準構建網頁以后，float浮動屬性是布局中非常重要的屬性，我們常常通過對

　　元素應用float浮動來進行布局。CSS+DIV布局就是將頁面分成若干個塊(盒子)，想要在頁面中呈現的內容都放入這些塊中，通過CSS來控制頁面中的內容在網頁中呈現出來的樣式。

　　設置頁面中的div盒子，html代碼如下所示。

　　使用CSS對盒子的寬、高、邊框等屬性進行了設置，得到結果如圖4所示。

　　當沒有運用float屬性時，sidebar塊和main塊分別占滿一行，即使兩個塊的寬度加起來小于頁面寬度，也沒辦法并列顯示，原因是

　　也是個塊級元素。如果想main區域在sidebar區域的右側排放，則需要將這兩個盒子分別設置float：left，即sidebar塊向左靠近包含它的盒子，main塊向左靠近sidebar塊;也可以將sidebar塊設置左浮動，main塊設置為右浮動，即sidebar塊向左靠近包含它的塊，main塊向右靠近包含它的塊。如果想兩個盒子左右顛倒放置，則需要將兩個盒子分別設置為右浮動，即sidebar塊向右靠近包含它的盒子，然后main塊向右靠近sidebar塊。

　　如圖5所示，雖然sidebar塊和main塊并列排放，但是footer區域只顯示了文字，盒子沒有顯示出來。這是因為，sidebar和main設定浮動之后，浮動的元素會脫離當前文檔，就像頁面中沒有該元素一樣，不占用頁面空間，所以footer塊會上移到header塊的下方，即位于sidebar和main區域的后面，圖5中虛線部分。如果將footer區域的高度設置高于sidebar和main區域的高度，更容易看出來。為了清除這種影響，需要在footer的樣式中設置clear：left，此時的效果如圖6所示。

　　另外可以通過在main盒子下面添加一個空盒子的方式清除浮動的影響，如前文所述。

　　計算機類論文發表核心期刊推薦《電腦與電信》是經國家新聞出版署正式批準，由廣東省對外科技交流中心主辦的學術理論刊物，國內外公開發行。本刊主要刊登計算機、互聯網、通訊、電子等相關領域的理論與實踐研究論文，以及相關理論研究綜述和介紹國外先進技術的研究報告。