div根據父元素根據子元素高度自適應高度

切圖時經常遇見一種問題：

　　父級的div高度為0，導致后面緊跟着的元素串位。（特別是在使用bootstrap布局的時候）以前都是通過該margin調整

　　百度看見http://blog.csdn.net/a5534789/article/details/51233522的博客時徹底解決了我的問題。

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

　　第一種:若子元素沒有帶有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; 　　}