彭麗蓉

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

關(guān)鍵詞：網(wǎng)頁布局;float

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

W3C將float劃分在CSS定位屬性中，對其的描述為：規(guī)定元素是否浮動。Float屬性在實際運用過程中是將元素轉(zhuǎn)變?yōu)楦釉?，通過屬性值來確定元素浮動方向。Float有4個屬性值，既：none、left、right和inherit。在CSS中，任何元素都可以利用float屬性被設(shè)置為浮動狀態(tài)，從而實現(xiàn)不同的頁面效果。

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

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

當(dāng)一個元素被設(shè)置float屬性后，元素自身會脫離正常的文檔流，從父級元素下抽離出來。如果此時父級元素設(shè)有邊框?qū)傩裕チ俗釉氐闹?，父級元素就不能自適應(yīng)子元素高度，導(dǎo)致邊框不能隨內(nèi)容而自動撐開，使元素溢出，造成網(wǎng)頁畫面錯位。另一方面，在父級設(shè)置了CSS background背景屬性時，父級元素不能被撐開，也會使設(shè)置的CSS背景不能正常顯示。Float屬性還會影響父元素和子元素之間的padding、margin屬性無法正確的顯示。

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

2 浮動元素的使用規(guī)則

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

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

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

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

3 Float 常見運用

Float屬性最初是用于設(shè)置圖片文字環(huán)繞效果，這個屬性僅應(yīng)用于圖像，使圖片轉(zhuǎn)為浮動元素后，文本可以圍繞在圖片四周，實現(xiàn)圖文環(huán)繞的效果。

根據(jù)浮動元素的排列規(guī)則，可以便利地制作橫向?qū)Ш綏l，在瀏覽屏幕寬度發(fā)生改變后，可自動調(diào)節(jié)位置，不至于造成網(wǎng)頁文件整體布局錯位。

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

4 總結(jié)

在深入學(xué)習(xí)網(wǎng)頁前端開發(fā)前，對CSS應(yīng)該加強學(xué)習(xí)和使用，float浮動屬性能夠幫助設(shè)計者快速便捷的進行網(wǎng)頁布局，需要認(rèn)真理解和熟練使用。