Block Formatting Context
css規(guī)范對(duì)它的定義
- 浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文
- 在一個(gè)塊格式化上下文中，盒在豎直方向一個(gè)接一個(gè)地放置，從包含塊的頂部開始。兩個(gè)兄弟盒之間的豎直距離由'margin'屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直margin會(huì)合并
MDN對(duì)BFC的的描述
一個(gè)塊格式化上下文（block formatting context） 是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。一個(gè)塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動(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è)多列容器中。
知道上面這些好像并沒(méi)有什么用處,我們還是不理解
BFC是什么呢? BFC 是這樣的東西（堆疊上下文也是）
- 它沒(méi)有定義
- 它只有特性/功能
功能一: 用 BFC 包住浮動(dòng)元素
其實(shí)我也不知道什么意思,不如看幾個(gè)例子吧
給父元素float
給父元素絕對(duì)定位
display:inline-block
overflow不為visible
display:table-cell
display: flow-root
重點(diǎn): display: flow-root(觸發(fā)BFC,無(wú)副作用)
看了上面幾個(gè)例子,父元素觸發(fā)BFC包住兒子,再看一下定義:
- 浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文
意思是不是很明白了,只要給父元素一些上面規(guī)定的屬性,就會(huì)有BFC,可以包住子元素
margin 合并
image.png
一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素. 因?yàn)?child為浮動(dòng)元素創(chuàng)建了自己的BFC,所以sunzi不歸parent管了
功能二: 相鄰BFC劃清界限
image.png
兩個(gè)相鄰元素,哥哥和弟弟,哥哥左浮動(dòng),就會(huì)疊在一起,給弟弟一些屬性,創(chuàng)建BFC,就會(huì)和哥哥分開,所以BFC的一個(gè)作用是相鄰的劃清界限
不明白BFC的概念,但是我們應(yīng)該看到之后,就知道這是BFC
