前端面試CSS系列——BFC

介紹下BFC及其應用

定義

BFC（Block Formatting Context）翻譯爲『塊級格式化上下文』。是一個獨立的渲染區域，只有（Block-level box）塊級盒子參與，BFC規定了內部盒子如何佈局，以及盒子之間的關係和做用。

解釋說明

Box(盒子)

Box盒子是CSS 佈局的基本單位，在CSS中咱們普遍的使用兩種『盒子』——塊級盒子和內聯盒子。HTML元素的類型和display屬性，決定了一個Box（盒子）的類型。不一樣類型的Box（盒子），會參與不一樣的Formatting Context（格式化上下文）。

Formatting Context(格式化上下文)

Formatting Context（格式化上下文） 是頁面中的一塊渲染區域，它決定了子元素將如何佈局，以及子元素之間的關係和做用。

Block Formatting Context，塊級格式化上下文，是Formatting Context（格式化上下文）的一種類型，只有（Block-level-box）塊級盒子參與；相對應有Inline Formatting Context （IFC內聯格式化上下文）。CSS3以後，還有GFC（Grid）和FFC（Flex）。

規則

1. 內部的box會按照垂直方向疊放
2. BFC是頁面上一個被隔離的容器，BFC內部的子元素佈局不會影響到外面的元素佈局。
3. 內部的box，垂直方向的距離由margin來控制。
4. 內部相鄰Box的margin會發生重疊。
5. BFC的區域不會與float box重疊
6. 計算BFC的高度時，浮動元素也參與計算

應用

1. 清除浮動（讓浮動元素的父級觸發BFC）
2. 阻止同一個BFC內box外邊距合併
3. 自適應兩欄佈局
4. 阻止元素被（float）浮動元素覆蓋

如何建立(觸發)BFC

• 根元素
• 浮動元素
• 定位元素
• 行內塊元素
• 表格單元格
• 表格標題
• overflow不爲visible的塊元素
• display值爲flow-root的元素
• contain值爲layout、content或paint元素
• 彈性元素flex佈局元素的直接子元素
• 多列容器grid佈局元素的直接子元素
• ...

總結

BFC塊級格式化上下文，簡單來講是一個封閉的區域，這區域裏面的盒子不會影響區域外面的佈局。BFC區域內的盒子須要遵照一些佈局規則，好比：盒子會按照垂直方向排，盒子垂直方向的距離由margin控制，BFC 區域不與浮動框重疊，計算BFC的高度時，浮動元素也參與計算等。根據BFC的佈局規則，BFC能夠解決清除浮動，外邊距合併等異常佈局，也能夠實現自適應兩欄佈局，阻止元素被浮動元素覆蓋。建立(觸發)BFC的條件有給元素添加overflow屬性且值不爲visible，float屬性且值不爲none，display屬性值爲：flow-root,inline-block,table-cell,table，table-row，flex，grid等。

參考連接

CSS of BFC

it邦——BFC

BFC in Css

https://www.programmersought.com/