提到CSS，首先會想到的就是盒模型，如果對於盒模型不是很理解的，看這裏。這是一個基礎的系列，看了盒模型還可以看看box-sizing,好了不多說了，下面介紹今天的重點。
首先從概念入門，B是Block,I是inline,F [Formatting] C [context]。一句話概括就是格式化上下文一個是塊級，一個是行級。
BFC有如下規則：
- 內部的盒子會在垂直方向，一個個的放置；
- BFC是頁面上的一個隔離的容器
- 屬於同一個BFC的 兩個相鄰Box的 上下margin會發生重疊
- 計算BFC的高度時，浮動元素也參與計算
- BFC的區域不會與float重疊；
觸發BFC的條件：
body 根元素；
浮動元素：float 不爲none的屬性值；
絕對定位元素：position (absolute、fixed)
display爲： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)
這裏提出一點，規則是作用於BFC內部的元素，而條件則是作用於BFC容器的，這點要理解。
這些只是概念，要想理解，還得結合一些例子來看。
佈局規則一二條是概念，就不介紹了。第三條：
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
} <body>
<div class="p"></div>
<div class="p"></div>
</body>效果如圖所示：
由圖可知，由於全都存在於body根元素的BFC下，發生了重疊，如果想避免重疊，可以用另一個BFC將第二個div包裹起來，可以自己試驗一下。這裏提一句，如果你直接將第二個div變成BFC（比如添加overflow:hidden），結果還是一樣的，因爲他們兩個還是處於同一個BFC下。
第四條：浮動元素參與計算BFC高度
<div style="border: 3px solid #000;">
<div style="width: 50px; height: 50px; background: green;
float: left;">
</div>
</div>
效果如上，由於只是一個普通的div，裏面包含的浮動元素並沒有爲div撐起高度。嘗試一下將div變成BFC看會發生什麼。
第五條：BFC區域不會與float發生重疊。
我們知道float是脫離文檔流的，如果對其中一個div使用了float，兩個並列的div會發生重疊，這時可以把非float的div變成BFC，這樣就會避免重疊。
以上就是BFC的內容，要做到理解並運用到實際開發中。
下面說一下IFC，在這之前先看一個例子，這個是我在開發中遇到的問題，
.box{
width:150px;
height:150px;
display:inline-block;
word-wrap:break-word;
background:green
}<div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div> <div class='box'>asdfasdfasdf</div>
效果如下：
可以看到第二個inline-block發生了下陷，這裏的知識就涉及到了IFC。這裏也不賣關子，給第二個添加vertical-align:top;屬性就可以解決問題。
首先說一下行級盒子的寬度和高度，可以很容易的發現，對<span>這個inline-level box設置寬度和高度並沒有什麼作用(對於行內元素，設置margin,padding的top 和 bottom也是不起作用的)，他有自己的寬高計算方法，高由font-size決定的，寬等於其子行級盒子的外寬度(margin+border+padding+content width)之和。
再說一下Inlinebox,總的來說，inlinebox就是佈局中的一行，裏面可以只包含一個<span>行內元素，也可以包含多個<span>或者inline-block.
inlinebox也有自己的寬高度計算的方法，寬度取決於內部元素的寬度，最大爲父元素的寬度，linebox的高度取決於linebox元素，一般由最高的元素決定linebox的高度。
這裏我不對於BFC 做過多解釋，如果想了解更深的，可以參照這篇文章，不過我倒是覺得如果不是太偏執，不需要這樣，畢竟<span>嵌套<span>也許永遠也不會用到這種操作。
要解決上面的問題，更多的應該關注行內元素的對齊方式,默認是baseline對其，來一張圖；
下面總結幾條inline元素的baseline位置：
- inline元素的baseline，爲內容盒content-box裏面文本框的基線。
- inline-block的外邊緣就是margin-box的外邊緣，
- 如果inline-block內部有內容，則baseline爲內容最下方的baseline，參照剛纔給出的例子。
- 如果Inline-block內部無內容，則baseline與margin-box的下邊緣重合。
- 如果overflow屬性不爲visible（默認）,則baseline與margin-box的下邊緣重合。
這裏給出一個例子做講解，剩下的可以自己去嘗試。
.box{
width:150px;
height:150px;
display:inline-block;
word-wrap:break-word;
background:green
}
.box1{
width:150px;
height:150px;
overflow:hidden;
display:inline-block;
word-wrap:break-word;
background:green
}<div class='box1'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>執行結果如下，可見baseline與第一個inline-block的margin-box重合了。
IFC和BFC就介紹到這裏，如果有問題歡迎提出指正。