mdn對bfc的定義：是web頁面的視覺化css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。
bfc是乙個獨立的渲染空間，只有塊級元素參與，規定了內部元素如何布局，並且與這個區域外部的元素不相干。
觸發bfc
布局規則
bfc可以做什麼呢？
包含浮動，清除父元素高度塌陷問題
浮動元素會脫離文件流（絕對定位也會）。如果乙個沒有高度或者height是auto的容器的子元素是浮動的，則該容器的高度是不會被撐開的。bfc能包含浮動，也能解決容器高度不會被撐開的問題。
避免外邊距重疊
bfc產生外邊距摺疊要滿足乙個條件：兩個相鄰元素要處於同乙個bfc中。所以，若兩個相鄰元素在不同的bfc中，就能避免外邊距摺疊，第乙個子元素的margin-top會把父元素帶下來，最後乙個子元素的margin-bottom不會撐大父元素的高度。
使用bfc可以實現兩欄布局，一側元素浮動，另一側觸發bfc
在多列布局中使用bfc
如果我們建立乙個佔滿整個容器寬度的多列布局，在某些瀏覽器中最後一列有時候會掉到下一行。這可能是因為瀏覽器四捨五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最後一列裡建立乙個新的bfc，它將總是佔據其他列先佔位完畢後剩下的空間。因為bfc的區域不會和浮動區域相重疊
BFC（格式化上下文）
什麼是bfc?bfc格式化上下文，它是乙個獨立的渲染區域，讓處於 bfc 內部的元素和外部的元素相互隔離，使內外元素的定位不會相互影響 如何產生bfc?display inline block position absolute fixed bfc作用 bfc最大的乙個作用就是 在頁面上有乙個獨立隔...
塊格式化上下文 BFC
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。塊格式化上下文包含建立它的元素內部的所有內容.塊格式化上下文對浮動定位 參見float 與清除浮動 參見clear 都很重要...
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...