高度塌陷问题

描述：父元素高度自适应，子元素浮动后，造成父元素高度为0，就叫做高度塌陷问题

1.给父元素设置overflow：hidden；

• 原理：父元素设置overflow：hidden；触发了BFC（块级格式化上下文）的状态，解决了子元素浮动造成的高度塌陷。
• 缺点：显示在父元素框之外的元素会被隐藏

2.在浮动元素的末尾添加一个空的div，并设置如下样式：

.clearfix{clear : both;height : 0;overflow : hidden;}
<!-- 注意：后面两个CSS属性是为了解决IE6不能识别较小容器的问题-->

• 缺点：在页面中多次出现若干个无内容的div，容易造成代码冗余

3.万能清除浮动法

父元素：after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

• 优点：官方推荐