BFC(塊級格式化上下文)的特色和應用場景

BFC(Block Formatting Context)的特色是元素擁有獨立的渲染區域,元素內部的內容(邊距,浮動元素等)不會影響到外部元素。

哪些狀況下會觸發BFC

• 設置overflow屬性,值不爲visible
• 設置float屬性,值不爲none
• 設置position屬性,值爲absolute或fixed
• 設置display屬性,值爲inline-block, table-cell, table-caption, flex, inline-flex, grid,或者inline-grid

BFC的典型應用場景: 解決塊級元素的塌陷問題(Collapsing)

1. 塊級元素的垂直塌陷: 當兩個相鄰的塊級元素擁有上下方向相鄰的邊距時(例如:上面的元素擁有margin-bottom值,下面的元素擁有margin-top值),此時上下元素之間的間隙不是二者邊距之和,而是二者之中的值較大的一個
2. 塊級元素的包含塌陷: 當塊級父元素沒有boder,padding值,塊級子元素有margin-top值時,子元素的margin-top值會在父元素的外部生效,也就是整個父元素區域會向下偏移,這個偏移值由子元素的margin-top值決定

此外,BFC還能夠用於清除浮動帶來的影響等