部分內容來自：http://www.itdecent.cn/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>
```
結果如下：
從以上的結果可以看到，父級出現(xiàn)了高度坍塌。解決關鍵是BFC
那么什么是BFC?
BFC（Block Formatting Context），塊級格式化上下文，它規(guī)定了內部的塊級元素的布局方式，默認情況下只有根元素（即body）一個塊級上下文。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則。
那么要怎么建立BFC?
一個BFC可以被顯式觸發(fā)，只需滿足以下條件之一：
float的值不為none；
overflow的值不為visible；
position的值為fixed / absolute；
display的值為table-cell / table-caption / inline-block / flex / inline-flex。
那么我們要怎么用BFC來解決高度坍塌的問題呢？
給父級添加? ? overflow:hidden
但是，這也會留下一個問題，就是子元素含有定位屬性，那么子級元素超出的部分會被隱藏，那么就要用其他的方法來解決高度坍塌的問題了。至于其他的方法就留到下一篇講吧。
注：）這是我的第一篇發(fā)表的文章，如果有錯誤或者有問題的，請留言，謝謝！
