BFC的概念
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
MDN給出的解釋是：BFC是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
相信這樣講還是很抽象，下面用代碼來(lái)實(shí)現(xiàn)一下，就能明白了
產(chǎn)生BFC的方式
- float的值不為none。
- position的值不為static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不為visible
BFC的規(guī)則
-
BFC就是一個(gè)塊級(jí)元素，塊級(jí)元素會(huì)在垂直方向一個(gè)接一個(gè)的排列 -
BFC就是頁(yè)面中的一個(gè)隔離的獨(dú)立容器，容器里的標(biāo)簽不會(huì)影響到外部標(biāo)簽 - 垂直方向的距離由margin決定， 屬于同一個(gè)
BFC的兩個(gè)相鄰的標(biāo)簽外邊距會(huì)發(fā)生重疊 - 計(jì)算
BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
BFC的作用
1. 解決高度坍塌
在一個(gè)沒(méi)有高度的div內(nèi)，嵌套了一個(gè)設(shè)置浮動(dòng)的div，會(huì)出現(xiàn)下面的情況
外層div出現(xiàn)了高度坍塌的現(xiàn)象，這時(shí)候給它加上一個(gè)overflow: hidden的css屬性，就產(chǎn)生了BFC
就解決高度坍塌的問(wèn)題了
2. 解決margin重疊問(wèn)題
?里面的三個(gè)div都設(shè)置了margin: 10px，但是網(wǎng)頁(yè)中的相鄰的div之間距離也是10px，原因就是同一個(gè)BFC容器內(nèi)的兄弟元素會(huì)產(chǎn)生垂直方向上的margin重疊，，會(huì)取兩個(gè)相鄰元素之間最大的marign作為之間的間隔。
可以通過(guò)給每個(gè)子元素包裹一個(gè)BFC容器來(lái)解決。
?3. 阻止元素被浮動(dòng)元素覆蓋
有兩個(gè)同級(jí)的div元素，前面div的設(shè)置了左浮動(dòng)，會(huì)覆蓋住后面的元素
?這時(shí)讓未設(shè)置浮動(dòng)的元素產(chǎn)生BFC，就可以避免被浮動(dòng)元素覆蓋
結(jié)語(yǔ)
塊格式化上下文對(duì)浮動(dòng)定位和清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素。浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)。外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間。
以上就是BFC的分析，BFC的概念比較抽象，但通過(guò)實(shí)例分析應(yīng)該能夠更好地理解BFC。在實(shí)際中，利用BFC可以閉合浮動(dòng)。同時(shí)，由于BFC的隔離作用，可以利用BFC包含一個(gè)元素，防止這個(gè)元素與BFC外的元素發(fā)生margin collapse。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-407766.html
參考
???https://blog.csdn.net/weixin_44165167/article/details/115617978文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-407766.html
到了這里，關(guān)于前端中的BFC是什么？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
