哈嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 css3

23 BFC

1 認識BFC

BFC（塊級格式化上下文）

BFC（Block formatting context）

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

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

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

2 塊級元素具有BFC條件

我們前面講過元素的顯示模式 display。

分為塊級元素行內元素行內塊元素，其實，它還有很多其他顯示模式。

不是所有的元素模式都能產生BFC,

w3c規范：

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

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

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

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

有寬度和高度，有外邊距 margin有內邊距 padding有邊框 border。

就好比，你有了練習武術的體格了，有潛力，有資質。

3 塊級元素觸發BFC的屬性

以上盒子具有BFC條件了，就是說有資質了，但是怎樣觸發才會產生BFC，從而創造這個封閉的環境呢？

再好比，你光有資質還不行，你需要一定額外效果才能出發的武學潛力，要么你掉到懸崖下面，撿到了一本九陰真經，要么你學習葵花寶典，欲練此功必先……

同樣，要給這些元素添加如下屬性就可以觸發BFC。

fioat屬性不為 none

position為 absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為 visible。

BFC布局規則特性：

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

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

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

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

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

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

4 BFC作用-清除內部浮動

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

5 BFC作用-解決外邊距合并

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

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

6%20BFC作用及其總結

BFC還可以制作右側自適應的盒子問題

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

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