BFC(塊級格式化上下文)

BFC(Block formatting context)
直譯爲"塊級格式化上下文"。
元素的顯示模式
咱們前面講過 元素的顯示模式 display。 
分爲 塊級元素   行內元素  行內塊元素 ，其實，它還有不少其餘顯示模式。
<img src="media/dis.png"  style="border: 1px dashed #ccc; padding: 5px;" />
 那些元素會具備BFC的條件
不是全部的元素模式都能產生BFC，w3c 規範： 
display 屬性爲 block, list-item, table 的元素，會產生BFC.
你們有麼有發現這個三個都是用來佈局最爲合理的元素，由於他們就是用來可視化佈局。
注意其餘的，display屬性，好比 line 等等，他們建立的是 IFC ，咱們暫且不研究。
這個BFC 有着具體的佈局特性： 
有寬度和高度 ， 有 外邊距margin  有內邊距padding 有邊框 border。
什麼狀況下可讓元素產生BFC
以上盒子具備BFC條件了，就是說有資質了，可是怎樣觸發纔會產生BFC，從而創造這個封閉的環境呢？ 
一樣，要給這些元素添加以下屬性就能夠觸發BFC。
-float屬性不爲none
-position爲absolute或fixed
-display爲inline-block, table-cell, table-caption, flex, inline-flex
-overflow不爲visible。
BFC元素所具備的特性
BFC佈局規則特性：
1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣）。
　　1. BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
　　2. 計算BFC的高度時，天然也會檢測浮動或者定位的盒子高度。
它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。
 BFC的主要用途
BFC能用來作什麼？
1. 清除元素內部浮動
只要把父元素設爲BFC就能夠清理子元素的浮動了，最多見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就能夠了。
主要用到 ：
計算BFC的高度時，天然也會檢測浮動或者定位的盒子高度。
2. 解決外邊距合併問題
外邊距合併的問題。
主要用到 ：
盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼咱們建立不屬於同一個BFC，就不會發生margin重疊了。
3.製做右側自適應的盒子問題
主要用到 ：
普通流體元素BFC後，爲了和浮動元素不產生任何交集，順着浮動邊緣造成本身的封閉上下文
BFC 總結
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，所以，有了這個特性，咱們佈局的時候就不會出現意外狀況了。