1.br標簽的中clear屬性:
br標簽中的clear屬性類似于CSS中的clear屬性,可以將與br標簽相鄰的元素中的浮動特性清除;(IE中容器設置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屬性,可以清除上文元素的浮動特性
<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;/*清除元素自身由浮動導致的瀏覽器解析問題*/
zoom:1;/*修正IE中的haslayout問題*/
}
此方法當overflow屬性設置為visible,清除浮動只對IE瀏覽器有效,
當overflow屬性為hidden,可能會因為hidden值將溢出部分隱藏
4.利用CSS樣式中的display屬性
表格是可以自適應高度的,可以利用div以表格的形式表現;
此方法問題較多
5.采用偽類:after
偽類:after可以在標簽元素的后面顯示更多內容,在添加偽類:after清除浮動時,將偽類層的內容清空,并將元素高度和行高設置為0,避免因為:after偽類而生成的偽類層出現其他內容
可以新添加一個類clearfix,并設置偽類,添加給容器
.clearfix:after{
clear: both;/*清除偽類層以上的浮動*/
display: block;/*設置偽類層內容為塊元素*/
visibility: hidden;/*設置偽類層內容可見*/
height: 0;/*設置偽類層高度為0*/
line-height: 0;/*設置偽類層行高為0*/
content: ""/*將偽類層中的內容清空*/
}
整理自《CSS那些事兒》
以上皆為浮動元素導致容器沒有高度的解決方案。