外層div高度不隨內層div高度改變的解決辦法

當b1和b2都是float=left時候,a1層的高度不會被b1和b2的高度撐開。

<div id=“div1″>
    <div id=”div2″ style="float:left;height:200px;"></div>
    <div id=”div3″style="float:left;height:200px;"></div>
</div>

解決方法一:設置div1的display屬性爲table即可;
解決方法二:插入一個額外的標籤
  這種方法就是向父容器的末尾再插入一個額外的標籤,並令其清除浮動(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒有什麼問題,缺點就是需要額外的(而且通常是無語義的)標籤,是W3C推薦的方法:
<div style="clear:both;"></div>
解決方法三:使用after僞類
  這種方法就是對父容器使用after僞類和內容聲明在指定的現在內容末尾添加新的內容。經常的做法就是添加一個“點”,因爲它比較小不太引人注意。然後我們再利用它來清除浮動(閉合浮動元素),並隱藏這個內容。
  這種方法兼容性一般,但經過各種 hack 也可以應付不同瀏覽器了,同時又可以保證html 比較乾淨,所以用得還是比較多的。
複製代碼代碼如下:

複製代碼

#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章