高度塌陷的最终解决方案

高度塌陷的问题

           在浮动布局总，父元素的高度默认是被子元素撑开的。
              当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
              将会无法撑起父元素的高度，导致父元素的高度丢失
            父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱
            所以高度塌陷是浮动不居中比较常见的一个问题，必须进行处理

终解决方案

/*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }