淺析浮動定位在網頁中的應用
2013-04-29 00:44:03陳偉衛(wèi)黃川林崔艷清
中國新通信 2013年8期
陳偉衛(wèi) 黃川林 崔艷清
【摘要】 浮動是CSS布局網頁中最常用的定位方法，能夠改變頁面對象的前后流動順序，簡化內容的排版，具有良好的伸縮性。
【關鍵詞】 CSS定位 Float Clear
浮動是CSS布局網頁中最常用的定位方法，也是理解CSS布局的重點與難點。浮動能夠改變頁面對象的前后流動順序，簡化內容的排版，而且具有良好的伸縮性。
一、默認文檔流
在理解浮動之前，先講一下默認文檔流，它是一個瀏覽器解析網頁的重要概念，對于一個html網頁，body元素下的任意元素，會根據其書寫的前后順序，組成了一個個上下關系，這便是文檔流。文檔流是瀏覽器的默認顯示規(guī)則。
實例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；
}
清除屬性的第一種用法是：如果因為特殊設計，不希望下面的對象繼續(xù)跟著浮動，便可以使用clear屬性來拒絕某個方向的浮動。第二種用法是：浮動很多元素之后，突然需要另起一行，也可以使用clear屬性。通過CSS布局中浮動（float）和清除（clear）屬性，可以在不改變html代碼的情況下，調整對象的顯示位置。而且浮動與清除相互配合，會產生多種實用的布局效果，所以是掌握浮動布局的重點。
參 考 文 獻
[1] 李超. CSS網站布局實錄（第二版）.科學出版社，2007
[2] 溫謙，主觶程.別具光芒——CSS網頁布局案例剖析，2010
