BFC(邊距重疊解決方案) 1、BFC的基本概念：塊級格式化上下文 2、BFC的原理（說白了就是BFC的渲染規則）： 這個規則是什麼呢？我覺得大家能說出4點就夠了

第一個就是BFC可以解決這個元素的垂直的邊距發生重疊的情況
第二個是BFC的區域不會與浮動元素的box重疊，這個肯定是用來清除浮動的。
第三個是BFC在頁面上是一個獨立的容器，外面的元素不會影響它裡面的元素，反過來，裡面的元素也不會影響到外面的元素。
第四個就是計算BFC高度的時候，浮動元素也會參與計算，現在比較抽象，等會通過程式碼演示

3、怎麼建立BFC 剛才給父元素加了一個 overflow:hidden就建立了一個BFC，那麼除了overflow:hidden，還有哪些寫法能建立BFC呢？

第一個是float的值不為none，因為css的float值預設是none，只要設定了浮動就建立了BFC
第二個是position的值不是static或者relative，也就是建立了一個bfc，比如設定成absolute,
 
fixed
第三個是display屬性是inline-box或者table-cell，跟table相關的這幾個，就建立了BFC
第四個是overflow,overflow為auto,hidden，都可以建立BFC

4、BFC的使用場景有哪些？

 

 

第一部分，解決邊距的問題

<!--bfc垂直方向邊距重疊-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow:
 
 hidden;
　　　　}
　　　　#margin>p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<p>2</p>
　　<p>3</p>
</section>

父級元素是建立了bfc的，如圖，我們發現上邊距是5px，1和2和3之間的間隔是25px，因為1的下邊距和2的上邊距發生了重疊，重疊的時候根據取最大值的原則。如果我不想讓它重疊，就給子元素增加一個父元素，給這個父元素建立一個bfc就能解決這個問題

<!--bfc垂直方向邊距重疊-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<div style="overflow:hidden">
　　　　<p>2</p>
　　</div>
　　<p>3</p>
</section>

 

如圖，這樣我們發現1和2，2和3之間的間隔變大了，沒有重疊

bfc的原理之一BFC可以解決這個元素的垂直的邊距發生重疊的情況 && overflow為auto,hidden，可以建立BFC

第二部分，解決佈局的問題

<!--跟佈局相關的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

如圖，我們發現，灰色的部分高度增高的時候，下面的部分侵入了左側的佔位，這個是float的一個特性，當左側沒有float元素的時候，依然會往左侵染，顯然，這不符合我們佈局的目的，那麼就需要給右側的元素建立一個bfc,bfc的原理之一是bfc的元素不會與float元素相互重疊，現在是重疊的，那麼建立bfc以後就不會與float重疊了

<!--跟佈局相關的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc;
　　　　　　overflow: auto;
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

 

給right元素加一個overflow，建立一個bfc，如圖，情況就變了，不會與左側元素重疊 bfc的原理之一，BFC的區域不會與浮動元素的box重疊 && overflow為auto,hidden，可以建立BFC     第三部分，計算高度

<!--浮動元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮動元素</div>
</section>

 

 

如圖，浮動元素的父元素高度為0，沒有了背景色。這個就是子元素遇到浮動的時候，它的高度計算沒有包含進來，如果當這個父元素設定為bfc的時候，子元素的高度也會參與到父元素的高度計算中來

<!--浮動元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red;
　　　　　　/* overflow: auto; */
　　　　　　float: left;
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮動元素</div>
</section>

給父元素加個overflow或者float建立了bfc，那麼就計運算元元素高度，就運算元元素是float，也會計算

bfc原理之一計算BFC高度的時候，浮動元素也會參與計算 && float的值不為none，設定了浮動就建立了BFC