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

雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時(shí)候，還是感覺有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。大家也可以關(guān)注我的GitHub后續(xù)的更新

首先，貼出官方文檔，https://www.w3.org/TR/2011/RE...
CSS2.1規(guī)范的中文翻譯：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.

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

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

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

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

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

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

block-level box:

display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block fomatting context；

inline-level box:

display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；

run-in box:

css3 中才有,https://codepen.io/wenjul/pen...

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

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

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

1.內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

2.Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

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

4.BFC的區(qū)域不會(huì)與float box重疊。

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

6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

其實(shí)在規(guī)范里已經(jīng)差不多列出了BFC出現(xiàn)的場景了，下面分條目再次列舉一下。

根元素

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...

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

首先我們?cè)囍鴮懸幌麓a，看看效果

html代碼

css代碼

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

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

what？ 黑人問號(hào)臉？難道不是應(yīng)該是下面這樣的效果嗎？我只設(shè)置了子div，為什么父子同時(shí)向下移動(dòng)了？？

本質(zhì)是因?yàn)橥粋€(gè)BFC內(nèi)垂直方向的margin合并現(xiàn)象，所有挨著的兩個(gè)或者多個(gè)盒元素的margin會(huì)合并為一個(gè)margin并共享。挨著的意思是同級(jí)別或者是嵌套，并且他們之前沒有非空內(nèi)容，padding或者border分割。

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

因?yàn)橥粋€(gè)BFC中才會(huì)出現(xiàn)這種現(xiàn)象。那我們可以把父元素變成一個(gè)BFC。那子元素的邊距就不會(huì)影響到父元素了。把父元素變成一個(gè)BFC的方法有很多。我們?cè)谏线呉擦信e了什么情況下會(huì)產(chǎn)生BFC。所以我們可以把父元素的float屬性設(shè)置為非none，也可以將position改為absolute或fixed，也可以將display設(shè)為inline-block, table-cell, table-caption, flex, inline-flex。也可以將overflow設(shè)置為非visible( hidden,scroll,auto, )我們這里用overflow:hidden來演示;

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

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

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

要求：兩側(cè)寬度固定，中間一列寬度自適應(yīng)

利用浮動(dòng) https://codepen.io/zhaojianxi...

利用絕對(duì)定位 https://codepen.io/zhaojianxi...

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

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

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

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