高度塌陷问题的产生
在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时就会导致子元素无法撑起父元素的高度，由此引发父元素的高度塌陷
代码如下：
如果此时下面有其他元素，一旦你的父元素的高度塌陷，那么下面的元素必然会往上拱，这样会使你的页面布局非常混乱
代码如下：
解决方法一：直接把父元素的高度定死，可以避免高度塌陷问题，但是这种方法后期不方便维护，所以不推荐使用
还有一种解决方法，那就是开启元素的BFC
什么叫BFC呢？
根据W3C的标准，BFC（Block Formatting Context）叫块级格式化上下文，BFC是CSS中隐含的属性，该属性可以设置打开或者关闭，默认是关闭的，当我们为一个元素开启BFC后，该元素会变成一个独立的布局区域，总之BFC的目的就是：形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局，并且触发了BFC的容器具有普通容器所没有的一些特性
那么都有哪些特性呢？
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素父元素的垂直外边距不会和子元素重叠
3.开启BFC的元素可以包含浮动的子元素
开启BFC的方式：
1.设置元素的浮动即float的值不为none（float：left/right/both;）//不推荐，会导致宽度丢失//
2.将元素的 overflow设为非visible值 (overflow:hidden/scroll/auto;)
3. 将元素设置为行内块元素（display：inline-block;）//不推荐，会导致宽度丢失//
4. 设置元素绝对定位（position：absolute/fixed;）
解决方法二：开启父元素的BFC
代码如下：//这里我采用overflow属性//
个人浅解：对于上面提到的触发了BFC的容器具有普通容器所没有的一些特性，我个人的理解是在普通容器会发生的浮动元素覆盖问题，子元素和父元素外边距重叠问题，还有不可以包含浮动的子元素的问题这些在开启了BFC的元素身上都失效了，就好比生活在地球上的一个普通人，突然打通任督二脉，升仙了，他可以长生不老，他可以每天不吃饭，这些困扰普通老百姓的问题统统在他身上不起作用。以上都是我个人愚见，如有不正，请指正，共勉！