如何去消除页面的高度塌陷

高度塌陷；产生的条件：子元素的浮动，父元素没有高度就会塌陷

解决：1. 给父元素添加高度，不建议使用。

优点：简单容易理解 缺点：不适合高度自适应。

2.给父元素添加overflow：hidden；最常用的。

缺点：如果用到了定位，并且是定位到父元素外面去就不能用了.

3 写一个空的div 给父元素，然后写上{clear：both；height：0；display：block；overflow：hidden；}或者{zoom：1} 但是这个属性必须是在IE8以上浏览器和非IE浏览器才支持：after，zoom（IE专有属性） 可解决IE6，IE7的浮动问题。注意：这个空div必须写在所有浮动内容之后，才会有效。只要加上clear：both就能显示。

4 万能清除法 ：使用伪对象选择器 

　　父元素：after{content：“ ”，display：block；clear：both；visibility：hidden/_{这个属性是为了隐藏content里面的内容与display：none效果一样}；height：0；overflow：hidden;_{/黄色字块后的属性内容是为了做兼容。}}红色标记为去掉以后也不会影响内容。

5 overflow：auto/scroll 不建议使用 缺点在于有滚动条

6 给父元素浮动 没有任何优点。

7给父元素添加display属性，然后display：table/table的所有属性table-cell，table-caption；。

伪对象选择器：before after first-letter（第一个不管结构或者是css的） first- line(作用于第一行也不管结构或者css) p：before{content:“加入需要的内容”}文字格式

　　　　　　　　p：before{content:url( )}图片格式

 还有一个：：selection 前面是加2个冒号，只支持background和color属性。IE6以下不兼容。