摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。

雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。大家也可以關注我的GitHub后續的更新

首先，貼出官方文檔，https://www.w3.org/TR/2011/RE...
CSS2.1規范的中文翻譯：https://github.com/ayqy/CSS2-1

下面是原文的摘抄

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the "margin" properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box"s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box"s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

For information about page breaks in paged media, please consult the section on allowed page breaks.

翻譯一下：
浮動，絕對定位的元素，非塊盒的塊容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不為’visible’的塊盒（當該值已被傳播到視口時除外（except when that value has been propagated to the viewport））會為其內容建立新的塊格式化上下文

在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的垂直距離由"margin"屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合并

在一個塊格式化上下文中，每個盒的左外邊界（left outer edge）挨著包含塊的左外邊界（對于從右向左的格式化，右外邊界挨著）。即使存在浮動（盡管一個盒的行框可能會因為浮動而收縮 譯注：環繞浮動元素放置的行框比正常的行短一些），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

感覺這樣直接貼文檔還是不太有條例，簡書上有一篇文章講的比較好。我摘錄了一部分。
原文：https://www.jianshu.com/p/666...

在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。

Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。
讓我們看看有哪些盒子：

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 中才有,https://codepen.io/wenjul/pen...

Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

1.內部的Box會在垂直方向，一個接一個地放置。

2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如 此。

4.BFC的區域不會與float box重疊。

5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

6.計算BFC的高度時，浮動元素也參與計算

其實在規范里已經差不多列出了BFC出現的場景了，下面分條目再次列舉一下。

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible( hidden,scroll,auto, )

https://codepen.io/zhaojianxi...

https://codepen.io/zhaojianxi...

https://codepen.io/zhaojianxi...

https://codepen.io/zhaojianxi...

https://codepen.io/zhaojianxi...

首先拋出一個問題，如果想讓一個子元素的頂部距離父元素100px,你會怎么辦呢。你肯定會說。給子元素設置margin-top為100px不就行了嗎？對嗎？ 不僅僅如此。你還需要注意不讓其產生邊距重疊。

首先我們試著寫一下代碼，看看效果

html代碼

css代碼

#parent{
  background:#ccc;
  height:400px;
}
#child{
  background:blue;
  height:50px;
  margin-top:100px;
}

出來的效果，你也可以在codepen上查看https://codepen.io/zhaojianxi...

what？ 黑人問號臉？難道不是應該是下面這樣的效果嗎？我只設置了子div，為什么父子同時向下移動了？？

本質是因為同一個BFC內垂直方向的margin合并現象，所有挨著的兩個或者多個盒元素的margin會合并為一個margin并共享。挨著的意思是同級別或者是嵌套，并且他們之前沒有非空內容，padding或者border分割。

知道了這種現象之后，解決辦法就可以針對性的解決了。我們的方案有很多。

因為同一個BFC中才會出現這種現象。那我們可以把父元素變成一個BFC。那子元素的邊距就不會影響到父元素了。把父元素變成一個BFC的方法有很多。我們在上邊也列舉了什么情況下會產生BFC。所以我們可以把父元素的float屬性設置為非none，也可以將position改為absolute或fixed，也可以將display設為inline-block, table-cell, table-caption, flex, inline-flex。也可以將overflow設置為非visible( hidden,scroll,auto, )我們這里用overflow:hidden來演示;

https://codepen.io/zhaojianxi...

我們也可以在子元素的前邊放置一個非空元素。這樣隔開了子元素和父元素的margin的相碰
https://codepen.io/zhaojianxi...

同樣我們可以給父元素設置一個border，或者padding，來隔開子元素和父元素的margin的相碰
https://codepen.io/zhaojianxi...

要求：兩側寬度固定，中間一列寬度自適應

利用浮動 https://codepen.io/zhaojianxi...

利用絕對定位 https://codepen.io/zhaojianxi...

利用table https://codepen.io/zhaojianxi...

利用flex https://codepen.io/zhaojianxi...

利用grid https://codepen.io/zhaojianxi...

github：https://github.com/JesseZhao1...