淺析浮動(dòng)定位在網(wǎng)頁(yè)中的應(yīng)用

陳偉衛(wèi)　黃川林　崔艷清

【摘要】 浮動(dòng)是CSS布局網(wǎng)頁(yè)中最常用的定位方法，能夠改變頁(yè)面對(duì)象的前后流動(dòng)順序，簡(jiǎn)化內(nèi)容的排版，具有良好的伸縮性。

【關(guān)鍵詞】 CSS定位 Float Clear

浮動(dòng)是CSS布局網(wǎng)頁(yè)中最常用的定位方法，也是理解CSS布局的重點(diǎn)與難點(diǎn)。浮動(dòng)能夠改變頁(yè)面對(duì)象的前后流動(dòng)順序，簡(jiǎn)化內(nèi)容的排版，而且具有良好的伸縮性。

一、默認(rèn)文檔流

在理解浮動(dòng)之前，先講一下默認(rèn)文檔流，它是一個(gè)瀏覽器解析網(wǎng)頁(yè)的重要概念，對(duì)于一個(gè)html網(wǎng)頁(yè)，body元素下的任意元素，會(huì)根據(jù)其書(shū)寫(xiě)的前后順序，組成了一個(gè)個(gè)上下關(guān)系，這便是文檔流。文檔流是瀏覽器的默認(rèn)顯示規(guī)則。

實(shí)例1的html代碼如下：

……

默認(rèn)文檔流所示效果如圖1所示：

二、浮動(dòng)布局float屬性的用法

float屬性的具體浮動(dòng)方式有三種：left：對(duì)象將向左浮動(dòng)，下面的內(nèi)容流到當(dāng)前對(duì)象的右側(cè)；right：對(duì)象將向右浮動(dòng)，下面的內(nèi)容流向左側(cè)；none：對(duì)象不浮動(dòng)。下面以實(shí)例詳解其用法。

實(shí)例1加入浮動(dòng)后的CSS代碼如下所示：

#left {

background-color： #CCC；

height： 100px；

width： 100px；

border： 1px solid #000；

float：left；

}

#right {

background-color：#390；

height： 150px；

width： 150px；

border： 1px solid #000；

float：left；

}

效果如圖2所示：

通過(guò)簡(jiǎn)單的float代碼，改變了頁(yè)面中三個(gè)對(duì)象的顯示順序，讓兩個(gè)盒子還有文字在同一行并排顯示。

需要注意的是：對(duì)象進(jìn)行浮動(dòng)后，脫離了原來(lái)默認(rèn)文檔流，所以同一層的盒子需要一起加浮動(dòng)屬性。

三、清除的用法

clear清除屬性是浮動(dòng)布局中的另一個(gè)重要工具，指出了不允許有浮動(dòng)對(duì)象的邊。它有四個(gè)屬性值：none：允許兩邊都可以有浮動(dòng)對(duì)象；left：不允許左邊有浮動(dòng)對(duì)象；right：不允許右邊有浮動(dòng)對(duì)象；both：不允許有浮動(dòng)對(duì)象。

如果給上述實(shí)例中的段落文字加入清除屬性，段落文字就會(huì)另起一行顯示，形成一種新的布局樣式。加入的CSS代碼如下所示：

p{

clear：both；

}

清除屬性的第一種用法是：如果因?yàn)樘厥庠O(shè)計(jì)，不希望下面的對(duì)象繼續(xù)跟著浮動(dòng)，便可以使用clear屬性來(lái)拒絕某個(gè)方向的浮動(dòng)。第二種用法是：浮動(dòng)很多元素之后，突然需要另起一行，也可以使用clear屬性。通過(guò)CSS布局中浮動(dòng)（float）和清除（clear）屬性，可以在不改變html代碼的情況下，調(diào)整對(duì)象的顯示位置。而且浮動(dòng)與清除相互配合，會(huì)產(chǎn)生多種實(shí)用的布局效果，所以是掌握浮動(dòng)布局的重點(diǎn)。

參 考 文 獻(xiàn)

[1] 李超. CSS網(wǎng)站布局實(shí)錄（第二版）.科學(xué)出版社，2007

[2] 溫謙，主觶程.別具光芒——CSS網(wǎng)頁(yè)布局案例剖析，2010