高度坍塌是什么？

先让我们看一下父元素高度坍塌是怎么样的一个现象？

未形成高度坍塌时：

父元素高度坍塌时：

为什么形成高度坍塌？

可能有细心的读者已经发现了，发生高度坍塌的代码中子元素添加了float:left的样式，float浮动会让元素脱离文档流，而父元素在未设置高度的情况下其高度需要由子元素撑起来，那么当子元素脱离文档流之后父元素就会发生高度坍塌。

我在这里总结了四种方法：

1.给父元素添加overflow:hidden 。

原理：CSS中的overflow:hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。

优点：代码少，简单。缺点：如果刚好父元素有些超范围的子元素内容需要显示（比如，个别position定位的子菜单项），不想隐藏，就会发生冲突。

2.在浮动元素的下方添加空div，并给元素声明clear:both，同时保险起见再加上height:0，用以清楚个别块元素可能自带的height:16px。

原理：利用clear:both属性和父元素必须包含非浮动的元素的两个原理

缺点：无端多出一个无意义的看不见的元素，影响选择器和查找元素。以及增加前端框架的负担。

3.父元素添加浮动float:left，设置父元素之后的平级的元素清除浮动(clear:both)

原理：浮动属性也会强制父元素扩大到包含所有浮动的内部元素。

缺点: 可能产生新的浮动问题

4.完美解决：给父元素添加::after{content:"";display:block;clear:both;height:0}