您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了css中清除浮動(dòng)的方式有哪些,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來研究并學(xué)習(xí)一下“css中清除浮動(dòng)的方式有哪些”這篇文章吧。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言,主要是用來設(shè)計(jì)網(wǎng)頁的樣式,使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁,也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
css中清除浮動(dòng)有【clear:both】、after偽元素、對父級設(shè)置高度、對父級設(shè)置【overflow:hidden】四種方式。其中推薦使用的方式是使用after偽元素清除浮動(dòng)。
CSS中清除浮動(dòng)的四種方式如下:
1、clear:both清除浮動(dòng)
HTML代碼:
<div class="container"> <div class="left">left浮動(dòng)</div> <div class="right">right浮動(dòng)</div> <div class="clear"></div> </div>
CSS代碼:
<style> .container{ margin:40px auto; width:400px; border:5px solid grey; background: yellow;/*背景正常顯示*/ } .left{float:left;width:200px;height:100px;border: 1px solid red;} .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} /*邊框能撐開*/ .clear{clear:both;} </style>
結(jié)果:
父級背景以及邊框也能正常顯示和撐開了,優(yōu)點(diǎn)方便使用,缺點(diǎn)是會(huì)多加HTML空標(biāo)簽
2、使用after偽元素清除浮動(dòng)(推薦使用)
優(yōu)點(diǎn):無需額外的標(biāo)簽,瀏覽器兼容性好,是目前用的最多的一種清除浮動(dòng)的方法之一,企業(yè)都在用;
缺點(diǎn):ie6-7不支持偽元素:after,使用zoom:1觸發(fā)hasLayout.
HTML代碼:
<div class="container"> <div class="left">left浮動(dòng)</div> <div class="right">right浮動(dòng)</div> </div>
CSS代碼:
<style> .container{ width:400px; border:5px solid grey; background: yellow; } .left{float:left;width:200px;height:100px;border: 1px solid red;} .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} .container:after{ content:""; display: block; clear:both; } .container{ *zoom: 1; /*ie6清除浮動(dòng)的方式 *號只有IE6-IE7執(zhí)行,其他瀏覽器不執(zhí)行*/ } </style>
結(jié)果顯示:
3、對父級設(shè)置適合CSS高度
一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置。這里我們知道內(nèi)容高度是100PX+上下邊框?yàn)?px,這樣具體父級高度為102px,
只需在上面的浮動(dòng)缺點(diǎn)副作用代碼中的設(shè)置類樣式.container加上父級高度即可,這里我就不做過多演示了。缺點(diǎn)也非常明顯,本人不建議這樣清除浮動(dòng)。
4、對父級設(shè)置overflow:hidden
原理:父元素定義overflow:hidden,此時(shí),瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度;
優(yōu)點(diǎn):簡單,無需增加新的標(biāo)簽;
缺點(diǎn):不能和position配合使用,因?yàn)槌龅某叽绲臅?huì)被隱藏;
代碼也是在副作用基礎(chǔ)上container中添加上overflow:hidden或者auto即可實(shí)現(xiàn)清除浮動(dòng)效果
結(jié)果顯示:
優(yōu)缺點(diǎn):很完美,但是屬性太多;不好分別。
以上就是關(guān)于“css中清除浮動(dòng)的方式有哪些”的內(nèi)容,如果改文章對你有所幫助并覺得寫得不錯(cuò),勞請分享給你的好友一起學(xué)習(xí)新知識,若想了解更多相關(guān)知識內(nèi)容,請多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。