關於BFC跟NFC

   BNF  　　

Box: CSS佈局的基本單位  　　Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是⼀一個⻚頁⾯面是由不少個 Box 組成的。元素的類型和 display  屬性，決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（⼀一個決定如何渲染⽂文檔的容  器），所以Box內的元素會以不一樣的⽅方式渲染。讓咱們看看有哪些盒⼦子：  block-level box:display 屬性爲 block, list-item, table 的元素，會⽣生成 block-level box。而且參與 block foma  tting context；  inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會⽣生成 inline-level box。而且參與 i  nline formatting context；　Formatting context  　　Formatting context 是 W3C CSS2.1 規範中的⼀一個概念。它是⻚頁⾯面中的⼀一塊渲染區域，而且有⼀一套渲染規則，它  決定了其⼦子元素將如何定位，以及和其餘元素的關係和相互做⽤用。最常⻅見的 Formatting context 有 Block fomatting  context (簡稱BFC)和 Inline formatting context (簡稱IFC)。  　　CSS2.1 中只有 BFC 和 IFC, CSS3 中還增長了 GFC 和 FFC。  　　BFC 定義  　　BFC(Block formatting context)直譯爲"塊級格式化上下⽂文"。它是⼀一個獨⽴立的渲染區域，只有Block-level box參  與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。  　哪些元素會⽣生成BFC?  根元素  float屬性不爲none  position爲absolute或fixed  display爲inline-block, table-cell, table-caption, flex, inline-flex  overflow不爲visible

IFC

 在IFC中，框（boxes）⼀一個接⼀一個地⽔水平排列，起點是包含塊的頂部。⽔水平⽅方向上的margin，border和padding在框之間獲得  保留。框在垂直⽅方向上能夠以不一樣的⽅方式對⻬齊：它們的頂部或底部對⻬齊，或根據其中⽂文字的基線對⻬齊。包含那些框的⻓長⽅方形區域，  會造成⼀一⾏行，叫作⾏行框(line box)。  ⼀一個⾏行框的寬度由包含它的元素的寬度和包含它的元素⾥裏⾯面有沒有float元素來決定，⾼高度的肯定由⾏行⾼高度計算規則決定。  ⾏行框的⾼高度⾜足以包含他的內部容器，也可能⽐比它包含的容器們都⾼高（⽐好比在基線對⻬齊的時候），當他包含的內部容器的⾼高度⼩小於⾏行  框的⾼高度時，內部容器的垂直位置由⾃自⼰己的vertical（默認值是baseline）這個屬性來肯定。（這個性質能夠⽤用來實現垂直居中）