问题-css解决高度塌陷

在使用CSS的时候，当父元素不设置高度，子元素就会撑大父元素的高度。这时给子元素添加浮动或绝对定位的话，父元素就会出现高度塌陷问题，如下图：（红色为父盒子边框，蓝色为子盒子，绿色为背景）

当出现高度塌陷的问题时，子元素脱离了文档流，容易造成页面布局出现问题。

解决方法：

1.给父元素设置固定高度。

　　缺点：无法让元素高度自适应。

2.利用BFC的显示原则，给父元素添加overflow:hidden的属性。

　　优点：能实现元素高度自适应；并解决高度塌陷问题；

　　缺点：可能导致子元素显示不全，被隐蔽

3.浮动元素可以给父元素添加清除浮动的属性。

　　缺点：增加代码负担，产生代码冗余；

.clear_fix{
    clear:both;
    height:0;
    float:left;
}

4.给父元素添加display:table元素，使其转换成表格特性；

　　缺点：会改变当前元素类型

5.使用after给父元素添加一个伪元素(推荐)

.clear_fix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}