郭巧麗 曹宏舉
摘 要：本文主要描述基于CSS+DIV的float技術(shù)在文本環(huán)繞、頁面布局和頁面導(dǎo)航中的應(yīng)用，對設(shè)置浮動元素產(chǎn)生的影響采用clear進行清除處理。Float技術(shù)不但對整個頁面布局進行規(guī)劃，也可以對一些基本元素如導(dǎo)航等進行排列，是網(wǎng)頁制作中非常重要的方法。
關(guān)鍵詞：CSS+DIV；float；clear
中圖分類號：TP391.41 文獻標(biāo)識碼：A
1 引言（Introduction）
早期的網(wǎng)頁采用
進行排版，存在各種各樣的問題，比如：升級困難、代碼的修改和維護費時費力等。CSS+DIV是目前比較流行的網(wǎng)頁布局技術(shù)，它使得內(nèi)容和樣式完全分離，在修改頁面時不需要關(guān)心任何后臺操作的問題，其中的float更是網(wǎng)頁制作中不可缺少的部分[1-3]。可以將float值設(shè)置為left、right或者默認值none，設(shè)置浮動定位后，浮動的框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。float取值為none則不會發(fā)生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示。
2 Float在文本環(huán)繞中的應(yīng)用（Application of float in
the text around）
網(wǎng)頁中經(jīng)常能看到文字環(huán)繞圖片的效果，通常把這種方式稱“文本環(huán)繞”。在網(wǎng)頁設(shè)計中，使用了CSS的float屬性的頁面元素就像在印刷布局里面被文本環(huán)繞的圖片一樣。浮動的本意是要將插入到文章中的圖片向左或者向右浮動，使圖片下方的文字自動環(huán)繞在它的周圍，使圖片的左邊或者右邊不會出現(xiàn)一大塊的留白。
文本環(huán)繞的html代碼如下：
得到的效果圖如圖1所示，可以看出文字并沒有環(huán)繞圖片，盡管圖片右側(cè)存在大塊的空白，原因是![]()
是個塊級元素。塊級元素的特點是，獨自占滿整個一行，即使它的右側(cè)有大塊空白，在它之后的元素也只能顯示在它的下面一行。
如果想要將圖片右側(cè)的區(qū)域空出來，文字顯示在圖片右側(cè)區(qū)域，則需要設(shè)置img{float：left；}，圖片將向左側(cè)浮動，直到碰到包含它的框為止，效果如圖2所示。
從圖2可以看出，雖然文字顯示在了圖片右側(cè)，但是圖片跑出了包含它的盒子。這是因為浮動的元素會脫離當(dāng)前文檔，就像頁面中沒有該元素一樣，不占用頁面空間，此時如果再添加內(nèi)容，會顯示在浮動圖片的后面，被圖片蓋住，顯然不是我們需要的效果。為了清除浮動圖片造成的影響，在文字的下方添加空盒子，html代碼如下：
同時在樣式中定義.clear{clear：left}，因為對該盒子不設(shè)置寬、高等樣式，也不放置任何內(nèi)容，所以不占用任何空間，不影響布局，只起到一個清除的作用。清除之后的效果如圖3所示。
設(shè)置clear：left是清除左浮動造成的影響，right是清除右浮動造成的影響，清除最常用的是clear：both，清楚左右浮動造成的影響。
3 Float在網(wǎng)頁布局中的應(yīng)用（Application of float in
the webpage layout）
應(yīng)用Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)頁以后，float浮動屬性是布局中非常重要的屬性，我們常常通過對
元素應(yīng)用float浮動來進行布局。CSS+DIV布局就是將頁面分成若干個塊（盒子），想要在頁面中呈現(xiàn)的內(nèi)容都放入這些塊中，通過CSS來控制頁面中的內(nèi)容在網(wǎng)頁中呈現(xiàn)出來的樣式。
設(shè)置頁面中的div盒子，html代碼如下所示。
使用CSS對盒子的寬、高、邊框等屬性進行了設(shè)置，得到結(jié)果如圖4所示。
當(dāng)沒有運用float屬性時，sidebar塊和main塊分別占滿一行，即使兩個塊的寬度加起來小于頁面寬度，也沒辦法并列顯示，原因是
也是個塊級元素。如果想main區(qū)域在sidebar區(qū)域的右側(cè)排放，則需要將這兩個盒子分別設(shè)置float：left，即sidebar塊向左靠近包含它的盒子，main塊向左靠近sidebar塊；也可以將sidebar塊設(shè)置左浮動，main塊設(shè)置為右浮動，即sidebar塊向左靠近包含它的塊，main塊向右靠近包含它的塊。如果想兩個盒子左右顛倒放置，則需要將兩個盒子分別設(shè)置為右浮動，即sidebar塊向右靠近包含它的盒子，然后main塊向右靠近sidebar塊。
如圖5所示，雖然sidebar塊和main塊并列排放，但是footer區(qū)域只顯示了文字，盒子沒有顯示出來。這是因為，sidebar和main設(shè)定浮動之后，浮動的元素會脫離當(dāng)前文檔，就像頁面中沒有該元素一樣，不占用頁面空間，所以footer塊會上移到header塊的下方，即位于sidebar和main區(qū)域的后面，圖5中虛線部分。如果將footer區(qū)域的高度設(shè)置高于sidebar和main區(qū)域的高度，更容易看出來。為了清除這種影響，需要在footer的樣式中設(shè)置clear：left，此時的效果如圖6所示。
另外可以通過在main盒子下面添加一個空盒子的方式清除浮動的影響，如前文所述。
4 Float在導(dǎo)航制作中的應(yīng)用（Application of float in
the navigation）
float不但對整個頁面布局進行規(guī)劃，也可以對一些基本元素如導(dǎo)航等進行排列。制作導(dǎo)航，通常采用無序列表，html代碼如下：
經(jīng)過簡單的樣式設(shè)置，效果如圖7所示。
如果需要橫向?qū)Ш綏l，則需要將li設(shè)置浮動，設(shè)置浮動之后的效果如圖8所示。
可以看出浮動的元素脫離了當(dāng)前文檔，跑出了虛線框外。為了清除這種影響，我們?nèi)匀徊捎胏lear，在
