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)了