如何理解BFC-塊格式化上下文（圖文）

BFC概念

BFC（block formatting context）塊格式化上下文， 是Web頁(yè)面塊級(jí)元素布局及浮動(dòng)元素彼此交互的區(qū)域。BFC是一個(gè)獨(dú)立的布局環(huán)境，（實(shí)際頁(yè)面渲染時(shí)是不可見(jiàn)的），由BFC構(gòu)建的區(qū)域其內(nèi)部元素的布局是不受外界的影響的，利用這個(gè)特性可用來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響。在BFC中元素從頂端開(kāi)始垂直地一個(gè)接一個(gè)地排列，兩個(gè)元素之間的垂直的間隙是由他們的margin 值所決定的。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)元素的垂直外邊距會(huì)產(chǎn)生折疊。（后面詳細(xì)解釋）

形成BFC的條件：

1.浮動(dòng)、絕對(duì)定位、fixed定位，這些方式都能讓元素脫離文檔流形成獨(dú)立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex（非塊級(jí)元素的塊容器元素）
3.overflow:auto/hidden/scroll
overflow屬性本身并沒(méi)有什么特別之處，但是是會(huì)產(chǎn)生BFC創(chuàng)造獨(dú)立布局環(huán)境，使元素不受浮動(dòng)元素的影響。

使用BFC清除浮動(dòng)效果示例：

BFC的作用：

1.清除浮動(dòng)帶來(lái)的副作用（將浮動(dòng)限定在BFC區(qū)域中）
2.撐開(kāi)父元素（包住浮動(dòng)元素） 清除浮動(dòng)就是撐開(kāi)父元素
3.阻止外邊距合并
4.BFC獨(dú)立性可用來(lái)布局

關(guān)于margin合并

margin合并出現(xiàn)的三個(gè)場(chǎng)景：

1.同一個(gè)BFC環(huán)境中，處于普通文檔流中的垂直相鄰元素的外邊距合并。

2.父子元素的外邊距合并。

3.空元素自身的外邊距合并。

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并

margin合并規(guī)則：

1.兩個(gè)margin都是正值的時(shí)候，取兩者的最大值；
2.當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移；
3.當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行。

阻止相鄰元素外邊距合并的方法：

1.被非空內(nèi)容、padding、border 或 clear 分隔開(kāi)。
2.不在一個(gè)普通流中或用BFC分割開(kāi)。
3.讓margin在垂直方向上不毗鄰。

相關(guān)推薦：

css關(guān)于瀏覽器兼容問(wèn)題的解析

關(guān)于css響應(yīng)式的實(shí)現(xiàn)代碼及效果

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com