彭麗蓉

摘 要:本文針對(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)真理解和熟練使用。