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;
　　}