css浮动产生父元素坍塌的问题

问题产生的原因:
因为在父元素不设置高度的时候，父盒子的高度都是由子元素撑开的，当子元素浮动 之后，就已经脱离文档流了，就是已经脱离父元素的限制了，这时候父元素就没有内 容了，没有内容，高度当然就变成0了呀。
解决办法：

1.在浮动的子元素后面添加一个空白的div(其他标签也行)添加清除类名方便复用
.clear{clear:both;height:0;line-height:0;font-size:0;}

2.给父元素添加after样式
.clear:after{content:"";display:table/*可以避免浏览器兼容问题 */;clear:both;}

3.父元素定义overflow
.overflow{overflow:auto|hidden;zoom:1;}