這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)CSS中如何使用浮動(dòng)屬性float，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過(guò)10年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行成都網(wǎng)站建設(shè)、網(wǎng)站制作、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

CSS浮動(dòng)

請(qǐng)看下圖，當(dāng)把框1向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：

再請(qǐng)看下圖，當(dāng)框1向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框2，使框2從視圖中消失。

如果把所有三個(gè)框都向左移動(dòng)，那么框1向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：

CSS float屬性

在CSS中，我們通過(guò)float屬性實(shí)現(xiàn)元素的浮動(dòng)。

如需更多有關(guān)float屬性的知識(shí)，請(qǐng)?jiān)L問(wèn)參考手冊(cè)：CSS float屬性。

行框和清理

浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。

因此，創(chuàng)建浮動(dòng)框可以使文本圍繞圖像：

要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用clear屬性。clear屬性的值可以是left、right、both或none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

為了實(shí)現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動(dòng)框下面：

這是一個(gè)有用的工具，它讓周?chē)脑貫楦?dòng)元素留出空間。

讓我們更詳細(xì)地看看浮動(dòng)和清理。假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。您可能編寫(xiě)下面的代碼：

.news{  background-color:gray;  border:solid1pxblack;  }   .newsimg{  float:left;  }   .newsp{  float:right;  }   <divclassdivclass="news"> <imgsrcimgsrc="news-pic.jpg"/> <p>sometext</p> </div>

這種情況下，出現(xiàn)了一個(gè)問(wèn)題。因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的div不占據(jù)空間。

◆如何讓包圍元素在視覺(jué)上包圍浮動(dòng)元素呢？

需要在這個(gè)元素中的某個(gè)地方應(yīng)用clear：

不幸的是出現(xiàn)了一個(gè)新的問(wèn)題，由于沒(méi)有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個(gè)空元素并且清理它。

.news{  background-color:gray;  border:solid1pxblack;  }   .newsimg{  float:left;  }   .newsp{  float:right;  }   .clear{  clear:both;  }   <divclassdivclass="news"> <imgsrcimgsrc="news-pic.jpg"/> <p>sometext</p> <divclassdivclass="clear"></div> </div>

這樣可以實(shí)現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用clear，但是有時(shí)候不得不為了進(jìn)行布局而添加無(wú)意義的標(biāo)記。

不過(guò)我們還有另一種辦法，那就是對(duì)容器div進(jìn)行浮動(dòng)：

.news{  background-color:gray;  border:solid1pxblack;  float:left;  }   .newsimg{  float:left;  }   .newsp{  float:right;  }   <divclassdivclass="news"> <imgsrcimgsrc="news-pic.jpg"/> <p>sometext</p> </div>

這樣會(huì)得到我們希望的效果。不幸的是，下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問(wèn)題，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁(yè)腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

事實(shí)上，W3School站點(diǎn)上的所有頁(yè)面都采用了這種技術(shù)，如果您打開(kāi)我們使用CSS文件，您會(huì)看到我們對(duì)頁(yè)腳的div進(jìn)行了清理，而頁(yè)腳上面的三個(gè)div都向左浮動(dòng)。

上述就是小編為大家分享的CSS中如何使用浮動(dòng)屬性float了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：CSS中如何使用浮動(dòng)屬性float
URL網(wǎng)址：http://www.rwnh.cn/article14/pgcsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信小程序、域名注冊(cè)、網(wǎng)站營(yíng)銷、網(wǎng)站改版、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)