什么是高度坍塌？

父元素高度自适应，子元素设置float之后，造成父元素高度不能随子元素的高度变化而变化。

解决方法

1、给父元素添加固定高度，适合做高度固定的布局

优点：简单、代码少、容易掌握

缺点：只适合做高度固定的布局，要给出精确的高度，如果和父级div不一样时，会产生新的问题

2、给父元素添加overflow:hidden

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

3、给父元素结尾添加div标签clear:both

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理，需要增加多余的空标签，让人感觉不好

4、使用伪元素(更适合整站开发)

优点：浏览器支持好、不容易出现怪问题

缺点：代码多、不少初学者不理解原理，要两句代码结合才能让主流浏览器都支持

5、父级定义overflow:auto

优点：简单、代码少、浏览器支持好

缺点：内部宽度超过父元素容器之后，会出现滚动条

6、父级容器一起浮动

优点：没有优点

缺点：会产生新的浮动问题

7、父级容器定义display:table;

8、给父元素结尾添加br标签然后clear:both;

优点：代码少，浏览器支持好

缺点：造成多余代码，而且br标签在页面本来就是会换行的作用不符合语义化规范