我理解的BFC(塊級格式化上下文)

BFC(Block formatting context)

直譯為"塊級格式化上下文"。

BFC它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。

白話文： 孩子在家裡願意怎麼折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。

不是所有的元素模式都能產生BFC，w3c 規範：

display 屬性為 block, list-item, table 的元素，會產生BFC.

大家有麼有發現這個三個都是用來佈局最為合理的元素，因為他們就是用來視覺化佈局。

注意其他的，display屬性，比如 line 等等，他們建立的是 IFC ，我們暫且不研究。

這個BFC 有著具體的佈局特性：

BFC佈局規則特性：

1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.

2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

4.BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。

5.計算BFC的高度時，自然也會檢測浮動的盒子高度。

它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。

BFC能用來做什麼？

(1) 清除元素內部浮動

只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設定overflow: hidden樣式，對於IE6加上zoom:1就可以了。

主要用到

計算BFC的高度時，自然也會檢測浮動的盒子高度。

(2) 解決外邊距合併問題

外邊距合併的問題。

主要用到

盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們建立不屬於同一個BFC，就不會發生margin重疊了。

 (3) 製作右側自適應的盒子問題

主要用到

BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。

普通流體元素BFC後，為了和浮動元素不產生任何交集，順著浮動邊緣形成自己的封閉上下文

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們佈局的時候就不會出現意外情況了。