郭巧麗 曹宏舉
摘 要：本文主要描述基于CSS+DIV的float技術在文本環繞、頁面布局和頁面導航中的應用，對設置浮動元素產生的影響采用clear進行清除處理。Float技術不但對整個頁面布局進行規劃，也可以對一些基本元素如導航等進行排列，是網頁制作中非常重要的方法。
關鍵詞：CSS+DIV；float；clear
中圖分類號：TP391.41 文獻標識碼：A
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盒子下面添加一個空盒子的方式清除浮動的影響，如前文所述。
4 Float在導航制作中的應用（Application of float in
the navigation）
float不但對整個頁面布局進行規劃，也可以對一些基本元素如導航等進行排列。制作導航，通常采用無序列表，html代碼如下：
經過簡單的樣式設置，效果如圖7所示。
如果需要橫向導航條，則需要將li設置浮動，設置浮動之后的效果如圖8所示。
可以看出浮動的元素脫離了當前文檔，跑出了虛線框外。為了清除這種影響，我們仍然采用clear，在
