部分內(nèi)容來自：http://www.reibang.com/p/7e04ed3f4bea
我們都知道浙于，父元素在文檔流中高度默認(rèn)是被子元素?fù)伍_的，當(dāng)子元素脫離文檔流以后挟纱，將無法撐起父元素的高度羞酗，也就會(huì)導(dǎo)致父元素的高度塌陷
那么我們可以利用BFC來解決這個(gè)問題，讓我們先來看一個(gè)實(shí)例：
```
<style>
? ? ? .divBox{
? ? ? ? width:300px;
? ? ? ? background: #cecedb;
? ? ? ? border:1px solid #000;
? ? ? }
? ? ? .box1{
? ? ? ? ? width: 100px;
? ? ? ? ? height: 100px;
? ? ? ? ? background: pink;
? ? ? ? ? float: left; /* 注意：第一個(gè)div添加了浮動(dòng)元素float紊服，此時(shí)的塊脫離了文檔流? */
? ? ? }
? ? ? .box2{
? ? ? ? ? width: 200px;
? ? ? ? ? height: 50px;
? ? ? ? ? background: yellow;
? ? ? ? ? /* 這時(shí)的第二個(gè)div沒有脫離文檔流（沒有浮動(dòng)元素）整慎，自身的高撐開了父級(jí)的高 */
? ? ? }
? ? </style>
<body>
? ? <div class="divBox">
? ? ? ? <div class="box1"></div>
? ? ? ? <div class="box2"></div>
? ? </div>
</body>
```
結(jié)果如下：
從以上的結(jié)果可以看到，父級(jí)出現(xiàn)了高度坍塌围苫。解決關(guān)鍵是BFC
那么什么是BFC?
BFC（Block Formatting Context）裤园，塊級(jí)格式化上下文，它規(guī)定了內(nèi)部的塊級(jí)元素的布局方式剂府，默認(rèn)情況下只有根元素（即body）一個(gè)塊級(jí)上下文拧揽。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則腺占。
那么要怎么建立BFC?
一個(gè)BFC可以被顯式觸發(fā)淤袜，只需滿足以下條件之一：
float的值不為none；
overflow的值不為visible衰伯；
position的值為fixed / absolute铡羡；
display的值為table-cell / table-caption / inline-block / flex / inline-flex。
那么我們要怎么用BFC來解決高度坍塌的問題呢意鲸？
給父級(jí)添加? ? overflow:hidden
但是烦周，這也會(huì)留下一個(gè)問題尽爆，就是子元素含有定位屬性，那么子級(jí)元素超出的部分會(huì)被隱藏读慎，那么就要用其他的方法來解決高度坍塌的問題了漱贱。至于其他的方法就留到下一篇講吧。
注：）這是我的第一篇發(fā)表的文章夭委，如果有錯(cuò)誤或者有問題的幅狮，請(qǐng)留言，謝謝株灸！
