css布局篇：高度塌陷在搭建前端页面的时候，常常会遇到高度塌陷的问题，在这个过程中，也查阅了一些资料，所以在这里做个汇总

前言

在搭建前端页面的时候，常常会遇到高度塌陷的问题，在这个过程中，也查阅了一些资料，所以在这里做个汇总。

当父元素没有添加高度（高度自适应），而子元素又脱离文档流的时候（当子元素设置了浮动或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。

一、给父元素添加高度

这种方法虽然简单，但是只适合固定页面的布局，无法进行自适应，不推荐使用。

二、触发BFC

BFC即 Block Formatting Contexts (块级格式化上下文)， BFC有一个特性是计算BFC的高度时，浮动元素也参与计算，所以将box出发为BFC后可以解决高度塌陷。可以通过给box添加overflow: hidden;等声明触发BFC。

三、给所有的浮动元素后面加一个空的标签，给添加的这个空标签添加声明 clear: both; 。

另外，可以再加上height: 0; overflow: hieedn;这是为了避免这个空标签是li，因为li在IE6和IE7.上有默认高度撑着。

四、万能清除法：给高度塌陷的元素添加如下after伪类

.box::after{
    content: '';
    clear: both;/*清除两侧浮动*/
    display: block;/*转成成一个块元素*/
    overflow: hidden;
    visibility: hidden;
}

注意：::after对IE8以下有兼容问题，可以通过增加zoom: 1;声明来解决。