CSS浮動float的基礎(chǔ)知識點(diǎn)有哪些

這篇文章主要為大家展示了“CSS浮動float的基礎(chǔ)知識點(diǎn)有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS浮動float的基礎(chǔ)知識點(diǎn)有哪些”這篇文章吧。

創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

float屬性

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹埂?/p>

float屬性使元素能在設(shè)計(jì)中到處移動，從而讓其他元素圍繞它們。元素的浮動是水平而不是垂直方向的，只有三種可能屬性值：none，right，left.使用這兩個(gè)值時(shí)，浮動元素將浮動到容器元素所允許的最右或者最左.

clear屬性

清除浮動元素 取值：left,right,both,none ,inherit。這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。它表示框的哪些邊不應(yīng)該挨著浮動框。它讓周圍的元素為浮動元素留出空間。

float屬性實(shí)例

把框 1 向右浮動時(shí)，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣

當(dāng)框 1 向左浮動時(shí)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個(gè)框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個(gè)框向左浮動直到碰到前一個(gè)浮動框。

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

Clear屬性實(shí)例

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創(chuàng)建浮動框可以使文本圍繞圖像

阻止行框圍繞浮動框,在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面

浮動和清理實(shí)例：

假設(shè)希望讓一個(gè)圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>

出現(xiàn)了一個(gè)問題。因?yàn)楦釉孛撾x了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個(gè)元素中的某個(gè)地方應(yīng)用 clear：又出現(xiàn)了一個(gè)新的問題，由于沒有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個(gè)空元素并且清理它。

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; }.clear { clear: both; }<div class="news"> <img src="news-pic.jpg" /> <p>some text</p><div class="clear"></div></div>

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

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

.news { background-color: gray; border: solid 1px black; float: left; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>

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

以上是“CSS浮動float的基礎(chǔ)知識點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：CSS浮動float的基礎(chǔ)知識點(diǎn)有哪些
當(dāng)前網(wǎng)址：http://muchs.cn/article8/pppcop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、標(biāo)簽優(yōu)化、網(wǎng)站收錄、Google、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

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