兩種情況(無特殊說明子元素都是指代父元素的第一級子元素)

第一種:若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題.
第二種:若子元素全是帶有float屬性的元素,這時候我們會發現父元素塌陷,高度為０,因為float浮動元素脫離了正常的文件流,父元素相當於沒有了這兩個兒子！

解決這個問題的根源就是清除浮動：

1 , 給父節點增加樣式overflow:hidden或者overflow:auto 
2 , 在子元素中的最後一個新增一個兄弟節點,當然該節點應該是一個空節點.你可以用div或者br

<div style="clear:both"></div
 
>
<!--或者-->
<br clear="all" />

貼士

發現一個更好的一種方式，就是使用偽元素來達到這種效果，在父元素上增加一個:after偽元素,像這樣

div::after {
 clear: both
}

我看medium上面的一篇文章，是這樣來清除浮動的。from now on , I will take this

.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both
 
;
}

點選這個連結：display值為table 和 block的區別。

參考資料: