淺析浮動定位在網頁中的應用

陳偉衛　黃川林　崔艷清

【摘要】 浮動是CSS布局網頁中最常用的定位方法，能夠改變頁面對象的前后流動順序，簡化內容的排版，具有良好的伸縮性。

【關鍵詞】 CSS定位 Float Clear

浮動是CSS布局網頁中最常用的定位方法，也是理解CSS布局的重點與難點。浮動能夠改變頁面對象的前后流動順序，簡化內容的排版，而且具有良好的伸縮性。

一、默認文檔流

在理解浮動之前，先講一下默認文檔流，它是一個瀏覽器解析網頁的重要概念，對于一個html網頁，body元素下的任意元素，會根據其書寫的前后順序，組成了一個個上下關系，這便是文檔流。文檔流是瀏覽器的默認顯示規則。

實例1的html代碼如下：

……

默認文檔流所示效果如圖1所示：

二、浮動布局float屬性的用法

float屬性的具體浮動方式有三種：left：對象將向左浮動，下面的內容流到當前對象的右側；right：對象將向右浮動，下面的內容流向左側；none：對象不浮動。下面以實例詳解其用法。

實例1加入浮動后的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所示：

通過簡單的float代碼，改變了頁面中三個對象的顯示順序，讓兩個盒子還有文字在同一行并排顯示。

需要注意的是：對象進行浮動后，脫離了原來默認文檔流，所以同一層的盒子需要一起加浮動屬性。

三、清除的用法

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

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

p{

clear：both；

}

清除屬性的第一種用法是：如果因為特殊設計，不希望下面的對象繼續跟著浮動，便可以使用clear屬性來拒絕某個方向的浮動。第二種用法是：浮動很多元素之后，突然需要另起一行，也可以使用clear屬性。通過CSS布局中浮動（float）和清除（clear）屬性，可以在不改變html代碼的情況下，調整對象的顯示位置。而且浮動與清除相互配合，會產生多種實用的布局效果，所以是掌握浮動布局的重點。

參 考 文 獻

[1] 李超. CSS網站布局實錄（第二版）.科學出版社，2007

[2] 溫謙，主觶程.別具光芒——CSS網頁布局案例剖析，2010