哈嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學(xué)習(xí)3個月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

第二階段 css3

23 BFC

1 認(rèn)識BFC

BFC（塊級格式化上下文）

BFC（Block formatting context）

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

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

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

2 塊級元素具有BFC條件

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

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

不是所有的元素模式都能產(chǎn)生BFC,

w3c規(guī)范：

display屬性為block,list-item, table的元素，會產(chǎn)生BFC

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

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

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

有寬度和高度，有外邊距 margin有內(nèi)邊距 padding有邊框 border。

就好比，你有了練習(xí)武術(shù)的體格了，有潛力，有資質(zhì)。

3 塊級元素觸發(fā)BFC的屬性

以上盒子具有BFC條件了，就是說有資質(zhì)了，但是怎樣觸發(fā)才會產(chǎn)生BFC，從而創(chuàng)造這個封閉的環(huán)境呢？

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

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

fioat屬性不為 none

position為 absolute或fixed

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

overflow不為 visible。

BFC布局規(guī)則特性：

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

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

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

4 BFC的區(qū)域不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣。

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

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

4 BFC作用-清除內(nèi)部浮動

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

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

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

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

6%20BFC作用及其總結(jié)

BFC還可以制作右側(cè)自適應(yīng)的盒子問題

BFC的區(qū)域不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣。

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