網上有許多關於 BFC 的文章,介紹瞭如何觸發 BFC 以及 BFC 的一些用處(如清浮動,防止 margin 重疊等)。css
1、BFC是什麼?
在解釋 BFC 是什麼以前,須要先介紹 Box、Formatting Context的概念。html
Box: CSS佈局的基本單位
Box 是 CSS 佈局的對象和基本單位, 直觀點來講,就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性,決定了這個 Box 的類型。 不一樣類型的 Box, 會參與不一樣的 Formatting Context(一個決定如何渲染文檔的容器),所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子:css3
- block-level box:display 屬性爲 block, list-item, table 的元素,會生成 block-level box。而且參與 block fomatting context;
- inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素,會生成 inline-level box。而且參與 inline formatting context;
- run-in box: css3 中才有, 這兒先不講了。
Formatting context
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域,而且有一套渲染規則,它決定了其子元素將如何定位,以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。佈局
CSS2.1 中只有 BFC
和 IFC
, CSS3 中還增長了 GFC
和 FFC。
flex
BFC 定義
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,而且與這個區域外部絕不相干。code
BFC佈局規則:
- 內部的Box會在垂直方向,一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每一個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,不然相反)。即便存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時,浮動元素也參與計算
2、哪些元素會生成BFC?
- 根元素
- float屬性不爲none
- position爲absolute或fixed
- display爲inline-block, table-cell, table-caption, flex, inline-flex
- overflow不爲visible