父元素塌陷问题及解决方案

父元素塌陷

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

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

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

解决方案

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