現(xiàn)如今網(wǎng)絡(luò)是我們每個(gè)人都會(huì)接觸到的東西，我們平時(shí)上網(wǎng)所看到的網(wǎng)頁(yè)都是由計(jì)算機(jī)專業(yè)技術(shù)人員精心設(shè)計(jì)制作的。我們隨手點(diǎn)開的一個(gè)頁(yè)面可能包含了很多技術(shù)，頁(yè)面的排版，文章的處理，圖片的制作等。本文是一篇論文發(fā)表核心期刊投稿的計(jì)算機(jī)網(wǎng)頁(yè)制作技術(shù)論文，主要論述了基于CSS+DIV的float技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用。 

　　摘 要：本文主要描述基于CSS+DIV的float技術(shù)在文本環(huán)繞、頁(yè)面布局和頁(yè)面導(dǎo)航中的應(yīng)用，對(duì)設(shè)置浮動(dòng)元素產(chǎn)生的影響采用clear進(jìn)行清除處理。Float技術(shù)不但對(duì)整個(gè)頁(yè)面布局進(jìn)行規(guī)劃，也可以對(duì)一些基本元素如導(dǎo)航等進(jìn)行排列，是網(wǎng)頁(yè)制作中非常重要的方法。

　　關(guān)鍵詞：論文發(fā)表核心期刊,CSS+DIV,float,clear

　　1 引言(Introduction)

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

　　可以將float值設(shè)置為left、right或者默認(rèn)值none，設(shè)置浮動(dòng)定位后，浮動(dòng)的框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂�float取值為none則不會(huì)發(fā)生任何浮動(dòng)，塊元素獨(dú)占一行，緊隨其后的塊元素將在新行中顯示。

　　2 Float在文本環(huán)繞中的應(yīng)用(Application of float in

　　the text around)

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

　　文本環(huán)繞的html代碼如下：

　　得到的效果圖如圖1所示，可以看出文字并沒(méi)有環(huán)繞圖片，盡管圖片右側(cè)存在大塊的空白，原因是是個(gè)塊級(jí)元素。塊級(jí)元素的特點(diǎn)是，獨(dú)自占滿整個(gè)一行，即使它的右側(cè)有大塊空白，在它之后的元素也只能顯示在它的下面一行。

　　如果想要將圖片右側(cè)的區(qū)域空出來(lái)，文字顯示在圖片右側(cè)區(qū)域，則需要設(shè)置img{float：left;}，圖片將向左側(cè)浮動(dòng)，直到碰到包含它的框?yàn)橹梗�效果如圖2所示。

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

　　同時(shí)在樣式中定義.clear{clear：left}，因?yàn)閷?duì)該盒子不設(shè)置寬、高等樣式，也不放置任何內(nèi)容，所以不占用任何空間，不影響布局，只起到一個(gè)清除的作用。清除之后的效果如圖3所示。

　　設(shè)置clear：left是清除左浮動(dòng)造成的影響，right是清除右浮動(dòng)造成的影響，清除最常用的是clear：both，清楚左右浮動(dòng)造成的影響。

　　3 Float在網(wǎng)頁(yè)布局中的應(yīng)用(Application of float in

　　the webpage layout)

　　應(yīng)用Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)頁(yè)以后，float浮動(dòng)屬性是布局中非常重要的屬性，我們常常通過(guò)對(duì)

　　元素應(yīng)用float浮動(dòng)來(lái)進(jìn)行布局。CSS+DIV布局就是將頁(yè)面分成若干個(gè)塊(盒子)，想要在頁(yè)面中呈現(xiàn)的內(nèi)容都放入這些塊中，通過(guò)CSS來(lái)控制頁(yè)面中的內(nèi)容在網(wǎng)頁(yè)中呈現(xiàn)出來(lái)的樣式。

　　設(shè)置頁(yè)面中的div盒子，html代碼如下所示。

　　使用CSS對(duì)盒子的寬、高、邊框等屬性進(jìn)行了設(shè)置，得到結(jié)果如圖4所示。

　　當(dāng)沒(méi)有運(yùn)用float屬性時(shí)，sidebar塊和main塊分別占滿一行，即使兩個(gè)塊的寬度加起來(lái)小于頁(yè)面寬度，也沒(méi)辦法并列顯示，原因是

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

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

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

　　計(jì)算機(jī)類論文發(fā)表核心期刊推薦《電腦與電信》是經(jīng)國(guó)家新聞出版署正式批準(zhǔn)，由廣東省對(duì)外科技交流中心主辦的學(xué)術(shù)理論刊物，國(guó)內(nèi)外公開發(fā)行。本刊主要刊登計(jì)算機(jī)、互聯(lián)網(wǎng)、通訊、電子等相關(guān)領(lǐng)域的理論與實(shí)踐研究論文，以及相關(guān)理論研究綜述和介紹國(guó)外先進(jìn)技術(shù)的研究報(bào)告。