BFC與IFC

BFC與IFC

在咱們作的網頁上一般最重要的其中一點就是美觀度，bfc他是一個塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

由於我如今每天在作網頁了，以前沒怎麼關注bfc與ifc原理，以致於我作出來的網頁有點誤差。因此要深入學習如下知識。

 bfc：指它裏面的子元素不會影響到外面的元素
加上一個overflow:hilden該元素的子元素是一個bfc下面
只要觸發的是個bfc那麼它對外面都沒有影響。
1.block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；

2.inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；

塊級元素，在瀏覽器中一般是垂直佈局，而後能夠用margin來控制塊級元素之間的間距，並列和嵌套的塊級元素都存在外邊距，也就是margin合併的問題。

而行內元素是以水平的方式佈局，垂直方向的margin，padding都是無效的，而且設置的寬高也是無效的。

它還有一些佈局的規則：

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

 

而IFC爲"內聯格式化上下文"，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來的

 1.IFC中的line box通常左右都貼緊整個IFC，可是會由於float元素而擾亂。float元素會位於IFC與與line box之間，使得line box寬度縮短。 
2.水平居中：當一個塊要在水平居中時，設置爲inline-block則會在外層產生IFC，經過text-align能夠水平居中。
3.垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，而後設置其vertical-align:middle，其餘行內元素則能夠在此父元素下垂直居中。

 同個ifc下的多個line box高度會不一樣。 IFC中時不可能有塊級元素的，當插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每一個IFC對外表現爲塊級元素，與div垂直排列。