float屬性在CSS層疊樣式表中的運(yùn)用

彭麗蓉

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

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

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

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

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

1 Float屬性對(duì)于父級(jí)元素的影響

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

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

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

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

其中，浮動(dòng)元素距離包含塊的長(zhǎng)度等于包含塊的padding值加上浮動(dòng)元素的margin值。

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

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

3 Float 常見(jiàn)運(yùn)用

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

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

因此，我們?cè)诶胒loat屬性來(lái)進(jìn)行頁(yè)面布局時(shí)，多個(gè)浮動(dòng)方向一致的元素使用流式排列，應(yīng)特別注意布局對(duì)象的高度問(wèn)題。

4 總結(jié)

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