FC及BFC

1.什麼是FC

2.BFC塊級格式化上下文(Block formatting context)

　Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子：
block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；
inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；
run-in box: css3 中才有。

(1)定義:它是一個獨立的渲染區域,只有block-level-box參與.它規定了塊級盒子內部子元素的佈局.
(2)BFC常見觸發條件:

1>.根元素，即HTML元素
2>.float不爲none
3>.position不爲static或者是relative
4>.overflow的值爲hidden,auto或者scroll
5>.display的值爲table-cell,table-caption或者inline-block

(3)BFC佈局規則:
1>.BFC內部的盒子在垂直方向一個接一個的放置
2>.同一個BFC中相鄰盒子的margin會發生合併

3>.每一個元素盒子的左外邊緣(margin-box)和包含它的容器的border-box接觸(對於從右往左的排版則相反，是右邊接觸),即便存在浮動也是如此
抽象1>,2>,3>:盒子排列方式,盒子緊鄰時外邊距會合並,盒子嵌套時內部元素的外邊距盒子和外部容器的border-box緊鄰
eg:

說明:img圖片的margin-box和class爲first塊元素的border-box的內側接觸.

4>.BFC區域不會和float-box重疊
5>.BFC是頁面上一個獨立的容器,它其中的子元素不會影響到外面得元素,外面得元素也不會影響到內部
6>.計算BFC的高度時,浮動元素也參與計算

簡單記錄順序:獨立的(5>)渲染(3>,1>,2>,4>)區域(區域的計算方式6>)

(4).重疊的計算方式
1>當兩個margin都是正值的時候，取二者的最大值；
2>當margin都是負值的時候，取的是其中絕對值較大的，而後，從 0 位置，負向位移；
3>當有正有負的時候，先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.能夠阻止元素被浮動元素覆蓋
2>.實現自適應兩欄佈局
3>.能夠包含浮動元素——清除內部浮動
4>.不一樣的BFC能夠阻止margin重疊

(6)思惟導圖