父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法

父元素塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。

可能出现的情况 即子元素脱标的情况

• 浮动
• 固定定位
• 绝对定位

解决方案

1. 父元素底部增加一行

   <div style='clear:both;'></div>

   缺点:添加了无意义的空标签 违背了结构表现分离

2. 父元素一起浮动

   本质是一个将错就错的方法

3. 利用BFC来给父元素增加CSS

   如给父元素加上

   overflow:auto; 或display:table-cell;或display:table-caption;

   等

4. 利用after伪元素 父元素增加after伪元素

   parent:after{content: ".";display: block;height: 0px;clear: both;visibility: hidden;      }  

5. 更优雅的改进方案 ---常用

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