帶你揭開BFC神秘的面紗
在前端的布局手段中，一直有這么一個知識點，很多前端開發(fā)者都知道有它的存在，但是很多人也僅僅是知道它的存在而已，對它的作用也只是將將說得出來，可是卻沒辦法說得非常的清晰。這個知識點，就是BFC。想要了解BFC的規(guī)則，前提必須是熟悉前端網(wǎng)頁的多種布局手段，例如盒的顯示模式display，三種布局手段標(biāo)準(zhǔn)流（normal）、浮動流（float）、定位流（position）等。你只有熟練掌握了這些布局手段之后，才能很好的理解BFC。今天洛壹網(wǎng)絡(luò)來為大家解析一下BFC，希望對各位新老朋友有所幫助。
一、定義
BFC - Block Formatting Context 塊級格式化上下文 BFC的定義，在官方文檔到中，是這么介紹BFC的。
“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.”
強行翻譯一下吧，簡單來說，這句話的意思就是：“一個BFC區(qū)域包含創(chuàng)建該上下文元素的所有子元素，但是不包括創(chuàng)建了新的BFC的子元素的內(nèi)部元素”
很顯然，哪怕強行翻譯了，大部分人依舊是看不懂這句話的。看都看不懂，那自然就沒什么能把它說明白。talk is cheap, show me the code.看不懂意思，我用代碼來給你演示。
<div class="box1"id="HM_bfc1">
<divclass="box2"></div>
<divclass="box3"></div>
<divclass="box4"></div>
<divclass="box5"id="HM_bfc2">
<divclass="box6"></div>
<divclass="box7"></div>
<divclass="box8"></div>
</div>
</div>
用這段代碼來解釋上面那段BFC定義的話，就應(yīng)該是這個意思：#HM_bfc1是一塊BFC區(qū)域，這塊區(qū)域包含了box2、box3、box4、box5，也就是所有#HM_bfc1的子元素。同時#HM_bfc2也創(chuàng)造了一塊BFC區(qū)域，包含了box6，box7，box8。注意，第一個box1的BFC，只包括box1的子元素box2345，不包括box678。#HM_bfc2這個BFC同樣也僅僅是包括自己的子元素box678。
劃重點
每一個BFC區(qū)域只包括其子元素，不包括其子元素的子元素。(這1點比較容易理解)
每一個BFC區(qū)域都是獨立隔絕的,互不影響！(這點不太好理解，但是后續(xù)會使用代碼驗證)
看完上面的描述，很多朋友依舊不懂，把第2節(jié)用心的再讀一遍，相信你會有新的收獲。然后往下繼續(xù)閱讀，你會豁然開朗。
二、觸發(fā)BFC
并不是任意一個元素都可以被當(dāng)做BFC，只有當(dāng)這個元素滿足以下任意一個條件的時候，這個元素才會被當(dāng)做一個BFC。
觸發(fā)BFC的條件
? body根元素
? 設(shè)置浮動，不包括none
? 設(shè)置定位，absoulte或者fixed
? 行內(nèi)塊顯示模式，inline-block
? 設(shè)置overflow，即hidden，auto，scroll
? 表格單元格，table-cell
? 彈性布局，flex
上代碼說明
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<p>大佬說，關(guān)注漲5毛錢</p>
<p>大佬說，收藏漲8毛錢</p>
</div>
<div id="box4"></div>
</body>
首先, body元素是1個BFC，因為它滿足我們的第1個條件(body根元素)，這個BFC區(qū)域包含子元素box1234，但是不包括兩個p標(biāo)簽，需要注意的是，box3不是一個BFC區(qū)域，因為他不滿足上面任意1個條件。如果我們希望box3也是1個BFC區(qū)域，只要讓box3滿足上面任意一個條件即可。
這個時候，box3元素被設(shè)置為了overflow為hidden，滿足上面第5個條件，所以此時，box3就成為了一個BFC區(qū)域，這個BFC區(qū)域包含其所有子元素 – 兩個p標(biāo)簽。
劃重點
并不是所有的元素都是BFC, 只有滿足了上面的任意1個條件之后，這個元素才成為1個BFC。
一個BFC區(qū)域，只包含其所有子元素，不包含子元素的子元素.
本文鏈接：http://m.jmtianhui.com/news/details-12-679.html
版權(quán)聲明：
1：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，并且以計算機技術(shù)研究交流為目的，僅供大家參考、學(xué)習(xí)，不存在任何商業(yè)目的與商業(yè)用途，如描述有誤或者學(xué)術(shù)不對之處歡迎及時提出，不甚感謝。
2、 如涉及版權(quán)問題，請聯(lián)系我們4724325@qq.com第一時間處理；
我們從以下三個方面，對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式，逐一展開分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
純CSS3文字Loading動畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進步和成長卻沒有中斷。在2022伊始，我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺后臺切換：在Linux終端運行命令的時候，在命令末尾加上 & 符號，就可以讓程序在后臺運行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會導(dǎo)致 Python 不能正確使用多行模式。