新聞中心
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么調(diào)用clear:both清除浮動(dòng),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到克井網(wǎng)站設(shè)計(jì)與克井網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋克井地區(qū)。
和大家重點(diǎn)討論一下clear:both清除浮動(dòng)的使用,在CSS中我們會(huì)經(jīng)常要用到“清除浮動(dòng)”Clear,比較典型的就是clear:both;該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊。這個(gè)屬性是用來(lái)控制float屬性在文檔流的物理位置的。
用clear:both清除浮動(dòng)
在CSS中我們會(huì)經(jīng)常要用到“清除浮動(dòng)”Clear,比較典型的就是clear:both;
CSS手冊(cè)上是這樣說(shuō)明的:該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊。這個(gè)屬性是用來(lái)控制float屬性在文檔流的物理位置的。
◆當(dāng)屬性設(shè)置float(浮動(dòng))時(shí),其所在的物理位置已經(jīng)脫離文檔流了,但是大多時(shí)候我們希望文檔流能識(shí)別float(浮動(dòng)),或者是希望float(浮動(dòng))后面的元素不被float(浮動(dòng))所影響,這個(gè)時(shí)候我們就需要用clear:both;來(lái)清除。
viewplaincopytoclipboardprint?
這個(gè)是第1列,p> 這個(gè)是第2列,p> 這個(gè)是第3列。p>
這個(gè)是第1列,p> 這個(gè)是第2列,p> 這個(gè)是第3列。p>
如果不用清除浮動(dòng),那么第3列文字就會(huì)和第1、2列文字在一起,所以我們?cè)诘?個(gè)這列加一個(gè)清除浮動(dòng)clear:both;
通常,我們往往會(huì)將“清除浮動(dòng)”單獨(dú)定義一個(gè)CSS樣式,如:
viewplaincopytoclipboardprint?
.clear{ clear:both; } .clear{ clear:both; }
然后使用
◆clear:both;可以終結(jié)在出現(xiàn)他之前的浮動(dòng)
viewplaincopytoclipboardprint?
.demodiv{float:left;width:100px;height:50px; background:red;margin:5px;} .d{clear:both} style>1div> 2div> div> 3div> 4div> .demodiv{float:left;width:100px;height:50px; background:red;margin:5px;} .d{clear:both} style> 1div> 2div> div> 3div> 4div>
效果圖如下:
clear:both參數(shù)說(shuō)明
◆語(yǔ)法:clear:none|left|right|both
◆參數(shù):
none:允許兩邊都可以有浮動(dòng)對(duì)象
both:不允許有浮動(dòng)對(duì)象
left:不允許左邊有浮動(dòng)對(duì)象
right:不允許右邊有浮動(dòng)對(duì)象
◆說(shuō)明:該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊。請(qǐng)參閱float屬性。對(duì)應(yīng)的腳本特性為clear
主要是用在div套div的結(jié)構(gòu)中。如果內(nèi)div是浮動(dòng)的,一般都需要clear浮動(dòng),不然的話內(nèi)div會(huì)超出外div的框架
所用什么時(shí)候用clear:both;就很重要,一般我們?cè)谛枰宄?dòng)的時(shí)候用到clear:both;不要輕意用到clear:both;因?yàn)樗灿懈辈?
你在要浮動(dòng)的兩個(gè)div后再加一個(gè)div,并設(shè)置樣式為clear:both,這樣就可以了(因?yàn)閏lear:both說(shuō)明這個(gè)div不允許左右有浮動(dòng)元素,于是就往下跑,撐開(kāi)了父div),如下:
viewplaincopytoclipboardprint?
abc div> abc div> div> abc div> abc div> div>
你這種兩列的情況,我一般都是兩個(gè)都float:left。
上述就是小編為大家分享的怎么調(diào)用clear:both清除浮動(dòng)了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目:怎么調(diào)用clear:both清除浮動(dòng)
文章URL:http://fisionsoft.com.cn/article/pihdcp.html