大家好，我是IT修真院上海分院第01期學(xué)員，一枚正直善良的web程序員。

今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會使用到的知識點(diǎn)：

BFC及其如何工作

一、背景介紹

首先我們知道CSS的基本單位是Box（盒子），一個html頁面就是很多Box組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染。

block-level box:display 屬性為 block, list-item, table 的元素，常見的塊級盒子有div、p、ul、h1-h6...；

inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，常見的行內(nèi)元素有a、span、img、imput...；

Formatting context：

Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。翻譯為執(zhí)行化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素 將如何定位，以及和其他元素的關(guān)系和相互作用。

處于頁面文檔流中的盒子必定位于某一格式化上下文中，最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

BFC定義：

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何 布局，并且與這個區(qū)域外部毫不相干。

二、知識刨析

BFC布局規(guī)則

1、內(nèi)部的Box會在垂直方向，一個接一個地放置。

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

3、每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

4、BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素，反之亦然。

5、計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算。

6、浮動的BOX區(qū)域不疊加到BFC上。

哪些元素會生成BFC?

1、根元素

2、float屬性不為none

3、position為absolute或fixed

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

5、overflow不為visible

三、常見問題

MAGIN重疊問題？

創(chuàng)建了新的BFC的元素（例如浮動元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會折疊

浮動元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）

絕對定位元素不與任何元素的外邊距產(chǎn)生折疊

inline-block元素不與任何元素的外邊距產(chǎn)生折疊

一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會產(chǎn)生折疊，除非它們之間存在間隙（clearance）。

一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會與其最后一個常規(guī)文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。

一個不包含border-top、border-bottom、padding-top、padding-bottom的常規(guī)文檔流元素，并且其 'height' 為 0 或 'auto'， 'min-height' 為 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。

四、擴(kuò)展思考

run-in box

FFC自適應(yīng)格式化上下文、GFC網(wǎng)格布局格式化上下文

五、參考文獻(xiàn)

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

六、ppt/視頻鏈接

視頻：https://pan.baidu.com/s/1o8fw2AQ 密碼：jz2h

PPT：https://ptteng.github.io/PPT/PPT/css-15-BFC.YT.html#/

技能樹.IT修真院

“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧?！

鳴謝！

感謝大家的閱讀！