簡介
在使用CSS的過程中，經常會聽到觸發BFC,但是何為BFC。BFC(Block formatting context)簡單的翻譯就是“塊級格式化上下文”。BFC是一個獨立的渲染區域，它規定Block-level Box如何布局，并且與整個區域外部毫不相干。 BFC有什么作用，BFC什么時候會觸發，本文淺析一下BFC產生條件、特性、主要用途，以及它工作的原理。希望喜歡的朋友可以點個贊，或者關注一波本人，謝謝。
觸發BFC的條件
元素的顯示模式通常可以分為：塊級元素、行內元素、行內塊元素，但是實際上存在的遠遠不止這三種顯示模式，而這三種是我們經常使用的。
并不是所有的元素都可以觸發BFC的效果，W3C規定顯示模式為：block、list-item、table的元素會觸發BFC。(注意當顯示模式為inline-block的時候會觸發IFC）
以上的盒子具有BFC條件，但是怎么樣才能觸發BFC呢，從而創造這個封閉的環境。需要給以上的元素添加如下的屬性就可以出觸發BFC的效果了
float屬性不為none
position為absolute或者是fixed
display為inline-block、table-cell、table-caption、flex、inline-flex
overflow不為visible
BFC具有的特性
- 在BFC中，內部的Box會在垂直方向，一個接一個地放置；
- Box垂直方向的距離由margin決定，屬于同一個BFC下相鄰兩個Box的margin會發生重疊；
- 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此。即不會發生margin穿透
- 形成了BFC的區域不會與float box重疊（可阻止因浮動元素引發的文字環繞現象）；
- 計算BFC高度時，浮動元素也參與計算（BFC會確切包含浮動的子元素，即閉合浮動）。
原本浮動元素應該是脫離文檔流的，但BFC中會計算其高度。
綜上特性所述，BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
BFC特性的一些應用
-
清除元素內部浮動
只要把父元素設為BFC就可以清除子元素的浮動了，最常見的用法就是在父元素上設置overflow:hidden樣式，對于IE6加上zoom:1就可以了
主要用到：就算BFC的高度時，自然也會檢測到浮動的盒子高度
清除元素內部浮動.png 解決外邊距合并的問題
外邊距合并的問題，主要用到盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰的盒子的外邊距會發生合并
不屬于同一個BFC的盒子不會發生外邊距合并的的效果
- 制作右側自適應盒子的問題
主要用到BFC區域的盒子不會與浮動的盒子產生交集，而是緊貼浮動邊緣
右側自適應盒子.png
