1.br標(biāo)簽的中clear屬性:
br標(biāo)簽中的clear屬性類似于CSS中的clear屬性纽乱,可以將與br標(biāo)簽相鄰的元素中的浮動(dòng)特性清除;(IE中容器設(shè)置zoom:1)
<div class="float-box">
<div class="float-left"></div>
<div class="float-right"></div>
<br clear="all">
</div>
<div class="no-float"></div>
2.利用CSS樣式中的clear屬性清除
相鄰元素添加clear屬性毛甲,可以清除上文元素的浮動(dòng)特性
<div class="float-box">
<div class="float-left"></div>
<div class="float-right"></div>
</div>
<div class="no-float" style="clear:both"></div>
此方法無法解決容器高度沒有被撐開的問題
3.利用CSS樣式中的overflow屬性清除
.float-box{
overflow: hidden;/*清除元素自身由浮動(dòng)導(dǎo)致的瀏覽器解析問題*/
zoom:1;/*修正IE中的haslayout問題*/
}
此方法當(dāng)overflow屬性設(shè)置為visible,清除浮動(dòng)只對(duì)IE瀏覽器有效,
當(dāng)overflow屬性為hidden邻梆,可能會(huì)因?yàn)閔idden值將溢出部分隱藏
4.利用CSS樣式中的display屬性
表格是可以自適應(yīng)高度的,可以利用div以表格的形式表現(xiàn)绎秒;
此方法問題較多
5.采用偽類:after
偽類:after可以在標(biāo)簽元素的后面顯示更多內(nèi)容浦妄,在添加偽類:after清除浮動(dòng)時(shí),將偽類層的內(nèi)容清空见芹,并將元素高度和行高設(shè)置為0剂娄,避免因?yàn)?after偽類而生成的偽類層出現(xiàn)其他內(nèi)容
可以新添加一個(gè)類clearfix,并設(shè)置偽類玄呛,添加給容器
.clearfix:after{
clear: both;/*清除偽類層以上的浮動(dòng)*/
display: block;/*設(shè)置偽類層內(nèi)容為塊元素*/
visibility: hidden;/*設(shè)置偽類層內(nèi)容可見*/
height: 0;/*設(shè)置偽類層高度為0*/
line-height: 0;/*設(shè)置偽類層行高為0*/
content: ""/*將偽類層中的內(nèi)容清空*/
}
整理自《CSS那些事兒》
以上皆為浮動(dòng)元素導(dǎo)致容器沒有高度的解決方案阅懦。