部分内容来自：https://www.jianshu.com/p/7e04ed3f4bea
我们都知道，父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
那么我们可以利用BFC来解决这个问题，让我们先来看一个实例：
```
<style>
.divBox{
width:300px;
background: #cecedb;
border:1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background: pink;
float: left; /* 注意：第一个div添加了浮动元素float，此时的块脱离了文档流 */
}
.box2{
width: 200px;
height: 50px;
background: yellow;
/* 这时的第二个div没有脱离文档流（没有浮动元素），自身的高撑开了父级的高 */
}
</style>
<body>
<div class="divBox">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
```
结果如下：
从以上的结果可以看到，父级出现了高度坍塌。解决关键是BFC
那么什么是BFC?
BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。它是页面中的一块渲染区域，并且有一套渲染规则。
那么要怎么建立BFC?
一个BFC可以被显式触发，只需满足以下条件之一：
float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex。
那么我们要怎么用BFC来解决高度坍塌的问题呢？
给父级添加 overflow:hidden
但是，这也会留下一个问题，就是子元素含有定位属性，那么子级元素超出的部分会被隐藏，那么就要用其他的方法来解决高度坍塌的问题了。至于其他的方法就留到下一篇讲吧。
注：）这是我的第一篇发表的文章，如果有错误或者有问题的，请留言，谢谢！
