這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)CSS中如何使用浮動屬性float,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐,進(jìn)行技術(shù)革新和技術(shù)進(jìn)步,經(jīng)過10年的發(fā)展和積累,已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊以及高素質(zhì)售后服務(wù)人員,并且完全形成了一套成熟的業(yè)務(wù)流程,能夠完全依照客戶要求對網(wǎng)站進(jìn)行成都網(wǎng)站建設(shè)、網(wǎng)站制作、建設(shè)、維護(hù)、更新和改版,實(shí)現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的,并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。
CSS浮動
請看下圖,當(dāng)把框1向右浮動時,它脫離文檔流并且向右移動,直到它的右邊緣碰到包含框的右邊緣:
再請看下圖,當(dāng)框1向左浮動時,它脫離文檔流并且向左移動,直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中,所以它不占據(jù)空間,實(shí)際上覆蓋住了框2,使框2從視圖中消失。
如果把所有三個框都向左移動,那么框1向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那么其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”:
CSS float屬性
在CSS中,我們通過float屬性實(shí)現(xiàn)元素的浮動。
如需更多有關(guān)float屬性的知識,請訪問參考手冊:CSS float屬性。
行框和清理
浮動框旁邊的行框被縮短,從而給浮動框留出空間,行框圍繞浮動框。
因此,創(chuàng)建浮動框可以使文本圍繞圖像:
要想阻止行框圍繞浮動框,需要對該框應(yīng)用clear屬性。clear屬性的值可以是left、right、both或none,它表示框的哪些邊不應(yīng)該挨著浮動框。
為了實(shí)現(xiàn)這種效果,在被清理的元素的上外邊距上添加足夠的空間,使元素的頂邊緣垂直下降到浮動框下面:
這是一個有用的工具,它讓周圍的元素為浮動元素留出空間。
讓我們更詳細(xì)地看看浮動和清理。假設(shè)希望讓一個圖片浮動到文本塊的左邊,并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼:
.news{ background-color:gray; border:solid1pxblack; } .newsimg{ float:left; } .newsp{ float:right; }sometext
這種情況下,出現(xiàn)了一個問題。因?yàn)楦釉孛撾x了文檔流,所以包圍圖片和文本的div不占據(jù)空間。
◆如何讓包圍元素在視覺上包圍浮動元素呢?
需要在這個元素中的某個地方應(yīng)用clear:
不幸的是出現(xiàn)了一個新的問題,由于沒有現(xiàn)有的元素可以應(yīng)用清理,所以我們只能添加一個空元素并且清理它。
.news{ background-color:gray; border:solid1pxblack; } .newsimg{ float:left; } .newsp{ float:right; } .clear{ clear:both; }sometext
這樣可以實(shí)現(xiàn)我們希望的效果,但是需要添加多余的代碼。常常有元素可以應(yīng)用clear,但是有時候不得不為了進(jìn)行布局而添加無意義的標(biāo)記。
不過我們還有另一種辦法,那就是對容器div進(jìn)行浮動:
.news{ background-color:gray; border:solid1pxblack; float:left; } .newsimg{ float:left; } .newsp{ float:right; }sometext
這樣會得到我們希望的效果。不幸的是,下一個元素會受到這個浮動元素的影響。為了解決這個問題,有些人選擇對布局中的所有東西進(jìn)行浮動,然后使用適當(dāng)?shù)挠幸饬x的元素(常常是站點(diǎn)的頁腳)對這些浮動進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。
事實(shí)上,W3School站點(diǎn)上的所有頁面都采用了這種技術(shù),如果您打開我們使用CSS文件,您會看到我們對頁腳的div進(jìn)行了清理,而頁腳上面的三個div都向左浮動。
上述就是小編為大家分享的CSS中如何使用浮動屬性float了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。