22 BFC

一、BFC是什麼？

1.`它是 Block Formatting Context (塊級格式化上下文) 的簡稱。

2. BFC 是指一個獨立的塊級渲染區域，只有Block-level Box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
BFC就是一種佈局方式，可以理解為一個作用範圍，即在一個BFC裡的佈局與其之外的佈局不相關或者說不相互影響。

3. 舉一個形象的例子：
可以把一個頁面想象成大的集裝箱，這個集裝箱裡裝的貨物就是 html元素。在現實生活中為了避免不同人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話無論你包裝裡面的貨物怎麼擺放，都不會影響到其他人的貨物。那麼這個包裝就可以被想象成 Block Formatting Context。

４. 為什麼要用BFC？
使用一定的CSS宣告可以生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則我們可以達到一定的佈局效果，為了達到特定的佈局效果我們讓元素生成BFC。

二 生成BFC的方式

當一個HTML元素滿足下面條件的任何一點，都可以產生 Block Formatting Context根元素

float的值不為none；

overflow的值不為visible(可以為hidden,scroll,auto)；

display的值為inline-block,table-cell,table-caption,flex,inline-flex中的任何一個；

position的值為absolute,fixed(不為static,relative中的任何一個)；

display：table也認為可以生成BFC，其實這裡的主要原因在於table會預設生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。

常用的用來觸發BFC的CSS樣式：
overflow: scroll,overflow: hidden,display: flex, float: left,display: table

其中可能產生的一些問題

display:table —— 可能會產生一些問題

overflow:scroll —— 可能會顯示不必要的滾動條

overflow:hidden —— 將會剪下掉溢位的元素

float:left —— 將會把元素置於容器的左邊，其他元素環繞著它

三、 BFC作用

• 1.自適應兩欄佈局

image.png

image.png

效果圖！

image.png

• 2.解決兄弟巢狀中或者父子巢狀中垂直方向上margin合併的問題
• 3.解決由於子元素浮動導致父級高度坍塌的情況！