一、BFC
Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規則 （可以把 BFC 理解為一個封閉的大箱子，容器裡面的子元素不會影響到外面的元素）。
1、BFC的佈局規則例如以下：
①.內部的盒子會在垂直方向，一個個地放置。 ②.盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊。
③.每一個元素的左邊，與包括的盒子的左邊相接觸，即使存在浮動也是如此。
④.BFC的區域不會與float重疊。
⑤.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
⑥.計算BFC的高度時，浮動元素也參與計算。
2、介紹過了BFC的佈局規範，再來說說哪些元素會觸發BFC。
只要元素滿足下面任一條件即可觸發 BFC 特性
①.根元素。
②.float的屬性不為none。
③.position為absolute或fixed。
④.display為inline-block；table-cell；table-caption；flex。
⑤.overflow不為visible。
3、接下來說說BFC的作用和原理
①、解決margin重疊問題
②、解決浮動高度塌陷問題
③、解決侵佔浮動元素的問題
首先看看自適應兩欄佈局 我們先定義兩個div：
<div class="aside"></div>
<div class="main"></div>
4、然後定義css：
div { width:300px; }
.aside { width: 100px; height: 150px; float: left; background: black; }
.main { height:200px; background-color:red; }
效果圖例如以下：
這正滿足了規範的第三條： 每一個元素的左邊，與包括的盒子的左邊相接觸。即使存在浮動也是如此。
所以假設我們須要將黑色區域撐到紅色的左邊。就須要利用規範的第四條： BFC的區域不會與float重疊。
也就是說我們須要創造BFC區域。我們通過將紅色區域的overflow設為hidden來觸發BFC：
.main { overflow:hidden; height:200px; background-color:red; }
效果例如以下：
5、接下來看看清除內部浮動 首先是父div套子div
<div class="parent">
<div class="child"></div>
</div>
6、然後是css：
.child { border:1px solid red; width:100px; height:100px; float:left; }
.parent { border:1px solid black; width:300px; }
效果例如以下：
能夠看到，父div壓根就沒有被撐開。 我們再回想一下BFC規範中的第六條： 計算BFC的高度時，浮動元素也參與計算。
所以我們須要將父div觸發為BFC，也就是將其overflow設為hidden：
.parent { border:1px solid black; width:300px; overflow:hidden; }
效果例如以下：
能夠看到父div已經撐開了。
7、再談談margin重疊問題。
先定義兩個垂直的div：
<div class="p"></div>
<div class="p"></div>
然後定義margin:
.p { width:200px; height:50px; margin:50px 0; background-color:red; }
能夠看到margin重疊後的效果：
我們再看看BFC規範的第二條： 盒子垂直方向的距離由margin決定，屬於用一個BFC的兩個相鄰Box的上下margin會發生重疊。
說明兩者屬於同一個BFC，所以我們須要兩個div不屬於同一個BFC。
為第二個div套一個父親div。然後講其overflow設為hidden來啟用一個BFC就能夠使margin不再重疊。
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
.wrap { overflow:hidden; }
效果例如以下：
二、IFC
IFC(Inline Formatting Contexts) 直譯為”內聯格式化上下文”，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)
水平居中：當一個塊要在環境中水平居中時，設定其為inline-block則會在外層產生IFC，通過text-align則可以使其水平居中。
垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，然後設定其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中。
BFC的佈局規則例如以下：
1.ifc中的元素會在一行中從左到右排列。 2.在一行上的所有元素會在該區域形成一個行框。
3.行寬的高度為包含框的高度，高度為行框中最高元素的高度。 4.浮動的元素不會在行框中，並且浮動元素會壓縮行框的寬度。
5.行框的寬度容納不下子元素時，子元素會換到下一行顯示，並且會產生新的行框。
6.行框的元素內遵循text-align和vertical-align。
如果大家覺得我的文章寫的還不錯的話，就關注 收藏一下哦！
還可以加我微信一起探討下前端問題。
微信：rgz987