解决高度塌陷问题

描述：父元素高度适应，子元素浮动后造成父元素高度为0，就叫做高度塌陷问题
解决方案：
    1、给父元素设置overflow：hidden；
        原理：设置overflow：hidden；触发了BFC的状态，闭合了子元素的浮动，子元素重新参与了父元素的高度计算，父元素高度不再为0
        缺点：显示在父元素框之外的内容会被隐藏
    2、在浮动元素的末尾添加一个空div，并设置如下样式：
        .clearfix{clear:both; height:0; overflow:hidden;}
        注：后两个属性是为了解决在IE6下不能识别较小高度的容器的问题的
        缺点：在页面中出现若干个这样的div,会造成代码冗余
    3、万能清除浮动法
        父元素：after{content:""; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
        优点：官方推荐