淺談BFC格局~

1.BFC含義💳

BFC全稱： Block Formatting Contexts  塊級元素格式化上下文

• W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了塊級元素如何對它的內容進行布局，以及與其他元素的關系和相互關系

• 一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型，不同類型的 Box，會參與不同的 Formatting Context（決定如何渲染文檔的容器）

• BFC內部的元素和外部的元素不會互相影響~~🎈

2.BFC觸發條件🔨

滿足以下條件之一就可觸發BFC

1. 根元素

2. float 的值不為 none

3. overflow 的值不為 visible

4. display 的值為 inline-block、table-cell、table-caption

5. position 的值為 absolute 或 fixed

3.BFC布局規則🔒

• 浮動的元素會被父級計算高度（父級觸發了BFC）
• 非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）
• margin不會傳遞給父級（父級觸發了BFC）
• 屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
• BFC 是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素
• 計算 BFC 的高度時，浮動元素也會參與計算
• BFC 的區域不會與 float box 重疊

3.BFC作用🔧

◾ 1）自適應兩欄布局

◾ 2）可以阻止元素被浮動元素覆蓋

◾ 3）可以清除內部浮動

◾ 4）可以阻止margin重疊

BFC在前端頁面布局中十分常見也灰常重要~