什么是高度塌陷？
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。
<div> // height = 0
<div style="float:right">float box</div>
</div>
如何来解决高度塌陷？
要解决高度塌陷问题，先要了解什么是块格式化上下文（Block Formatting Context，BFC）
BFC
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（html）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。
独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。
BFC可以用于以下场景:
- 外边距合并问题
- 父元素高度塌陷
- 自适应多栏布局
解决办法
综上，解决高度塌陷问题只需要是父级变为一个BFC, 创建BFC的方法有很多
下列方式会创建块格式化上下文：
- 根元素（
<html>） // 默认情况下只有根元素（html）一个块级上下文 - 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 计算值(Computed)不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。