高度塌陷及解决方法

原因：在文档流中，父元素的高度默认是由子元素撑起来的，也就是子元素多高，父元素就多高，如果给子元素设置浮动，子元素会脱离文档流，此时会导致子元素无法撑起父元素，也就是导致父元素高度塌陷，如果父元素高度塌陷了，父元素下所有的子元素都会向上移动，这样会导致页面布局混乱

解决方法

1. 给父元素固定高度，需要根据自己页面情况看是否可以给固定高度，因为一旦给固定高度，父元素就不会根据子元素自动撑高了
2. 添加空白div：（同时给标签清除浮动clear:both）不推荐，因为此方法会额外增加无意义的标签
3. 父元素overflow属性（开启bfc）(副作用最小的开启BFC的方式。)

        .parent {

           overflow: hidden;（hidden/auto/scroll任意都可，建议hidden）

        }

        此方法在ie6不支持，可以外加zoom: 1

         * zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
         * zoom:1表示不放大元素，但是通过该样式可以开启hasLayout

        .parent {

           zoom: 1/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/

        }

4. 双伪元素清除浮动（开启元素的bfc）

 可以通过伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

 这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

.parent::brfore, .parent::after {

content:””;  /*添加一个内容*/

display: block;  /*转换为一个块元素*/

clear: both;  /*清除两侧的浮动*/

}

在IE6中不支持after伪类, 所以在IE6中还需要使用hasLayout来处理

.parent {

   zoom: 1;

}