高度塌陷的产生条件和解决方法

高度塌陷产生的原因:
高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
例如：
.father{
width: 600px; /* 给父元素一个宽度 */
background-color: #008000; /* 给个背景颜色 */
}
.child_1{
width: 200px;
height: 200px;
background-color: #00FFFF;
float: left; /* 子元素浮动 */
}
.child_2{
width: 200px;
height: 200px;
background-color: #0000FF;
float: left; /* 子元素浮动 */
}
运行之后如此：

可以看到父元素已经高度塌陷。
原因：因为子元素浮动之后，这些子元素就不占用浏览器的位置和空间。
高度塌陷的解决方法：
1.给父元素添加一个固定高度
这里我们给父元素添加一个height：300px；然后我们在运行看看。

这时候我们可以看到高度塌陷问题就解决了，但是这种解决方法只适合高度固定的布局，不建议大家用这种方法。
2.给父元素添加overflow：hidden；zoom：1；
Zoom：1；是针对IE6浏览器的兼容。

我们会发现我们解决了塌陷问题并可以让高度自适应。但这种解决方法会对溢出的内容进行隐藏裁剪不显示，适合没溢出时使用。
3.给最后一个浮动元素的后面添加一个空标签，并声明clear：both；height：0；overflow：hidden；
添加height：0；和overflow:hidden;是为了防止加的空标签为li，并且在IE6和IE7浏览器上li会有默认高度撑着。

这样也会解决高度塌陷问题，但是加入了空标签，会造成代码的冗余。
4.万能消除法（建议大家使用这种方法）
给塌陷的元素添加伪对象
例如：.father：after{
content：“随便写”；
clear：both；
display:block;
height:0;
overflow:hidden;
visibility:hidden; /*visibility：hidden；为了隐藏content里的内容*
}