外層div高度不隨內層div高度改變的解決辦法
阿新 • • 發佈：2018-12-04
當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;
}