float屬性在CSS層疊樣式表中的運用

彭麗蓉

摘 要：本文針對網頁制作中比較難理解的float屬性展開，詳細解釋了它的使用原則和常見運用。

關鍵詞：網頁布局;float

網頁設計中對頁面布局有兩種方式，一種是浮動float，另一種就是定位position。兩種方式的運用一直是網頁設計者比較難理解的知識點，本文將會詳細講解第一種布局方式浮動float屬性的原理及運用。

W3C將float劃分在CSS定位屬性中，對其的描述為：規定元素是否浮動。Float屬性在實際運用過程中是將元素轉變為浮動元素，通過屬性值來確定元素浮動方向。Float有4個屬性值，既：none、left、right和inherit。在CSS中，任何元素都可以利用float屬性被設置為浮動狀態，從而實現不同的頁面效果。

在HTML文件中標準文檔流排列方式遵循從上往下，從左至右，遇塊（塊級對象）換行的原則。為元素的float屬性賦值后，該元素將從標準文檔流中脫離出來，緊貼上級元素的左右邊框，根據屬性值進行左右浮動。而浮動元素所空出來的位置，會由下一個文檔流頂上，靠著上一個文檔流的底部，占距原來文檔流的位置。Float屬性區別于文字內容的左右對齊text-align樣式，它只針對html標簽設置靠左靠右浮動，且沒有居中浮動的樣式。

1 Float屬性對于父級元素的影響

當一個元素被設置float屬性后，元素自身會脫離正常的文檔流，從父級元素下抽離出來。如果此時父級元素設有邊框屬性，失去了子元素的支撐，父級元素就不能自適應子元素高度，導致邊框不能隨內容而自動撐開，使元素溢出，造成網頁畫面錯位。另一方面，在父級設置了CSS background背景屬性時，父級元素不能被撐開，也會使設置的CSS背景不能正常顯示。Float屬性還會影響父元素和子元素之間的padding、margin屬性無法正確的顯示。

子元素使用float屬性造成父級無法撐開時，簡單的解決方法有兩個，一是可以根據子元素的整體高度計算出父級的高度，為父級元素設置height高度屬性，使其高度和子元素對應，在視覺上產生子元素內嵌的效果。二是可用 clear屬性來清除浮動，Clear屬性規定元素的某一側不允許出現浮動元素，通常是在浮動元素的后面加一句代碼來清除浮動對父級的影響：

2 浮動元素的使用規則

元素一般是作為行內元素或塊級元素存在于包含塊中。塊級元素獨占一行，可以為其設置寬度和高度，而行內元素則不會獨占一行，為其設置寬度和高度屬性也不會起作用。常見的塊級元素包括：hn（n為1-6）標題標簽、p段落標簽、ul列表標簽、div區隔標，常見行內元素包括：span文本內區塊、a錨點、input輸入框、textarea多行文本輸入框等。為元素設置float屬性后，元素會變成一個塊級元素的感覺，可以為其設置width、height、margin、padding屬性。

其中，浮動元素距離包含塊的長度等于包含塊的padding值加上浮動元素的margin值。

同時注意，當有多個浮動對象時，后面的浮動對象不會和前面的重疊，只會按順序進行排列，后一個元素的頂端不會超過前一個元素的底端;包含塊內如有兩個浮動元素，一個向左浮動，一個向右浮動，在包含塊寬度足夠，兩個元素會在同一平行位置向左向右排列。如果包含塊寬度少于兩個浮動元素的總寬度，剛兩個元素會自動各占一行地向左向右排列。

頁面布局時，排在浮動元素后邊的元素如是非浮動的行內元素，若兩者產生位置重疊時，那么跟在后面的行內元素的背景、邊框和內容都會完全顯示在浮動元素的上層;如跟在后面的是非浮動的塊級元素，在重疊時背景邊框等屬性會被浮動元素擋住，但內容會在沒有被浮動元素遮擋的位置顯示出來，如下圖。

3 Float 常見運用

Float屬性最初是用于設置圖片文字環繞效果，這個屬性僅應用于圖像，使圖片轉為浮動元素后，文本可以圍繞在圖片四周，實現圖文環繞的效果。

根據浮動元素的排列規則，可以便利地制作橫向導航條，在瀏覽屏幕寬度發生改變后，可自動調節位置，不至于造成網頁文件整體布局錯位。

因此，我們在利用float屬性來進行頁面布局時，多個浮動方向一致的元素使用流式排列，應特別注意布局對象的高度問題。

4 總結

在深入學習網頁前端開發前，對CSS應該加強學習和使用，float浮動屬性能夠幫助設計者快速便捷的進行網頁布局，需要認真理解和熟練使用。