這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在CSS中使用clear屬性清除浮動(dòng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了睢陽(yáng)免費(fèi)建站歡迎大家使用！
什么是CSS清除浮動(dòng)？
網(wǎng)絡(luò)上流行的說(shuō)法是：在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度（height）為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。
使用 clear 樣式清除
樣例：
CSS Code復(fù)制內(nèi)容到剪貼板
.clear-float {clear:both;}
clear 屬性是 CSS 1 就提供的用來(lái)清除浮動(dòng)的樣式，設(shè)置了 clear 屬性的元素，其上邊框位置會(huì)緊貼浮動(dòng)元素的 margin-bottom 邊界位置渲染，忽略其 margin-top 設(shè)置。這樣，父容器高度未設(shè)定(值是 auto)時(shí)，由于定義的清理浮動(dòng)樣式元素所在位置處于浮動(dòng)元素之下，容器計(jì)算后的實(shí)際高度就包含了浮動(dòng)元素。
實(shí)例
在代碼中添加了div4，并設(shè)置寬高300px，灰色背景色，代碼如下
HTML代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
div4
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
.div4 {
width: 300px;
height: 300px;
background-color: darkgray;
}
效果如下：
1.被紅色線條圈起來(lái)的就是div4，大家會(huì)發(fā)現(xiàn)個(gè)問(wèn)題，就是div4依然是從左上角的點(diǎn)進(jìn)行排布的，但是文字卻沒(méi)有在左上角的位置，這個(gè)就是浮動(dòng)會(huì)帶來(lái)的問(wèn)題。
2.如果我們想要實(shí)現(xiàn)div4貼在div2下面和div3右側(cè)的效果，就同時(shí)也需要給div4設(shè)置float: left屬性描述
但是我們并不想要這種效果，而是想要讓div4在下面重新排布，而不跟著div1、div2、div3他們浮動(dòng)，這時(shí)候，我們就需要清除浮動(dòng)了
CSS Code復(fù)制內(nèi)容到剪貼板
.div4 {
width: 300px;
height: 300px;
background-color: darkgray;
clear: both;
}
只需要添加clear: both;屬性，就可以清除浮動(dòng)了。
效果如下：
。
上述就是小編為大家分享的怎么在CSS中使用clear屬性清除浮動(dòng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
