CSS-盒子高度塌陷的解决办法

高度塌陷的原因：当前盒子没有高度，且内部元素脱离文档流，导致没有元素可以撑起盒子。（当元素设置了浮动或者绝对，固定定位时，都会导致元素脱离文档流）

解决办法：

1. 给盒子设置高度

2. 为盒子添加一个不脱离文档流的子元素，让这个子元素将盒子撑起

3. 解决浮动带来的高度塌陷：

   创建BFC：

   1. 设置父元素overflow属性为非默认值 (即除了visible之外的值，如：hidden/auto/scroll） 但设置此属性可能会导致一些问题，当值为auto时可能会出现滚动条；值为hidden时会导致溢出元素不可见...
   2. 给父盒子也设置浮动
   3. 将父盒子设置为行内块结构 inline-block
   4. 更多方法可以看 块格式化上下文 - Web 开发者指南 | MDN