高度塌陷；产生的条件：子元素的浮动，父元素没有高度就会塌陷
解决：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以下不兼容。