BFC的定義
BFC，全稱叫做“Block Formatting Context”遏佣，中文名叫“塊級(jí)格式化上下文”
根據(jù)對(duì)MDN中揽浙，BFC的定義是這樣的：
- 一個(gè)塊格式化上下文是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域捏萍，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。
- 一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容走敌，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素逗噩。
- 塊格式化上下文對(duì)于定位與清除浮動(dòng)很重要异雁。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局项炼，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)。
如何去理解BFC锭部？
上述MDN的定義聽起來(lái)很難以理解拌禾，那么到底什么是BFC呢？
BFC很難有一個(gè)明確的定義闻蛀，大家都知道BFC是什么您市，卻無(wú)法具體去定義它。簡(jiǎn)單來(lái)說秧饮，只要知道兩件事情泽篮，就能很好去理解BFC柑船。一是BFC產(chǎn)生的條件鞍时，二是BFC的特性。
BFC產(chǎn)生的條件
通常情況下及塘，滿足以下任一條件锐极，就能生成一個(gè)BFC
- 根元素或其它包含它的元素
- 浮動(dòng)元素 (元素的
float不是none) - 絕對(duì)定位元素 (元素具有
position為absolute或fixed) - 內(nèi)聯(lián)塊 (元素具有
display: inline-block) - 表格單元格 (元素具有
display: table-cell，HTML表格單元格默認(rèn)屬性) - 表格標(biāo)題 (元素具有
display: table-caption, HTML表格標(biāo)題默認(rèn)屬性) - 具有
overflow且值不是visible的塊元素肋层， display: flow-root-
column-span: all應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文栋猖，即便具有column-span: all的元素并不被包裹在一個(gè)多列容器中汪榔。
值得注意的是，大部分生成BFC的方法都會(huì)使得當(dāng)前的元素發(fā)生改變雌团，例如浮動(dòng)或絕對(duì)定位等等。其中唯有display: flow-root只為使當(dāng)前元素成為一個(gè)BFC柿菩，沒有其他任何功能雨涛，不會(huì)產(chǎn)生副作用，但是缺點(diǎn)是兼容性比較差凉泄，老版本的IE等瀏覽器不支持蚯根。
BFC的特性
生成一個(gè)BFC后颅拦，主要有兩個(gè)特性。
- BFC會(huì)包括當(dāng)前塊元素中所有的子元素距帅，除了內(nèi)部創(chuàng)建了新的BFC中的子元素碌秸。
- BFC能夠很好的讓兩個(gè)相鄰的元素界限分明，互不干涉蹂窖。
下面來(lái)看兩個(gè)例子
假設(shè)有一個(gè)父元素包含一個(gè)子元素恩敌。給子元素浮動(dòng)，父元素不設(shè)定寬高的情況下涣楷，浮動(dòng)的子元素就會(huì)脫離父元素跑到外面去抗碰。
那么當(dāng)我們給父元素加上overflow: hidden的時(shí)候弧蝇，父元素就成了一個(gè)新的BFC折砸，BFC會(huì)包含其內(nèi)部的所有子元素沙峻，子元素就會(huì)完全被父元素包裹起來(lái)摔寨。
另外一個(gè)例子，有兩個(gè)兄弟元素brother1 和brother2删顶，給兩個(gè)元素設(shè)定寬高淑廊，其中brother1設(shè)定左浮動(dòng)季惩，可以看到，看上去brother2是包含著brother1啥繁，兩個(gè)兄弟元素沒有明確的區(qū)分界限。
但當(dāng)我們給brother2加上overflow: hidden的之后碾阁，可以很明顯看出输虱，兩個(gè)相鄰的兄弟元素因?yàn)锽FC的影響完全區(qū)分開來(lái)了
