摘要：規(guī)范原文的定義可以作為的塊級(jí)元素，稱為原文。如果一個(gè)矩形區(qū)域，包含著一些排成一條線的盒子，稱為。一個(gè)的寬度，由他的包含塊和的存在情況決定。由于雙向文本處理內(nèi)聯(lián)盒子有可能在同一個(gè)里被分解成不同的盒子。參考資料規(guī)范的介紹知乎一個(gè)很棒的答案

頁(yè)面任何一個(gè)元素都可以看成是box，box分block-level，inline-level和匿名的。

匿名box：
    

        Some text
        
More text
    
其中"Some text"，瀏覽器會(huì)為其生成一個(gè)匿名box

什么是BFC？

BFC的全稱是Block Formatting Context，直譯過(guò)來(lái)是：塊級(jí)格式化上下文。

在理解BFC時(shí)先理解三個(gè)概念：

1、Block-level elements
屬于diplay: block;的元素，都是Block-level elements(塊級(jí)元素);有可能會(huì)觸發(fā)BFC。

2、block boxes
W3C規(guī)范原文的定義："Block-level boxes that are also block containers are called block boxes."可以作為block containers的塊級(jí)元素，稱為block boxes

3、block container box
原文："a block-level box is also a block container box"。

最后還有一句："The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous."

都簡(jiǎn)稱為塊級(jí)元素好了orz...為什么要糾結(jié)這個(gè)？主要是被規(guī)范的用詞搞暈了，花了點(diǎn)時(shí)間才搞明白這三個(gè)詞的意思。

BFC的布局規(guī)矩：

1、內(nèi)部box在垂直方向，一個(gè)接一個(gè)的放置;
2、box的垂直方向由margin決定，屬于同一個(gè)BFC的兩個(gè)box間的margin會(huì)重疊
3、BFC區(qū)域不會(huì)與float box重疊（可用于排版）；
4、BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
5、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

哪些元素或?qū)傩詴?huì)觸發(fā)BFC？

1、根元素；
2、float屬性不為none；
3、position為absolute或fixed；
4、display為inline-block, flex, 或者inline-flex；
5、overflow不為visible；

扒了下 W3C的文檔，里面對(duì)BFC的解釋是醬紫的：

"9.4.1 Block formatting contexts

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

同理，IFC是Inline formatting context。

在 規(guī)范 里，IFC的描述比BFC的描述多很多，原文比較長(zhǎng)，一點(diǎn)點(diǎn)扒吧:

an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

在一個(gè)IFC中，從父級(jí)元素的頂部開(kāi)始，盒子一個(gè)接一個(gè)橫向排列。此時(shí)，橫向的margin、borders、padding在這些盒子中都是有效的。這些盒子有可能通過(guò)不同的方式垂直對(duì)齊：1、他們底部或者頂部可以對(duì)齊，2、或者可以他們內(nèi)部的文字基線可以對(duì)齊。如果一個(gè)矩形區(qū)域，包含著一些排成一條線的盒子，稱為line box。

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

一個(gè)line box的寬度，由他的包含塊(containg block)和floats的存在情況決定。linebox的高度，由你給出的代碼決定。

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the "vertical-align" property.     When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

一般line box的高度對(duì)于子元素而言總是夠用的，不過(guò)有可能比他包含的最高的元素還高（如果這樣，內(nèi)部包含的盒子會(huì)對(duì)齊，基線排成一排）。當(dāng)盒子的高度小于父級(jí)盒子高度時(shí)，垂直方向的對(duì)齊由‘vertical-align’屬性決定（疑問(wèn)：原文的box B是啥？？）。
當(dāng)幾個(gè)內(nèi)聯(lián)盒子在line box一行內(nèi)放不下時(shí)，它們會(huì)分布在兩個(gè)以上的垂直并列(vertically-stacked)的line box上。因此，一個(gè)段落都是一堆line box堆疊在一起。line box在垂直堆疊的時(shí)候，不會(huì)有分離(no vertical separation)而且絕不會(huì)重疊（其他特殊情況除外【啥特殊情況？？】）

In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

一般來(lái)說(shuō)，line box和內(nèi)部元素，都是左挨左，右挨右。不過(guò)浮動(dòng)盒子可能會(huì)在包含塊和line box的邊緣之間。因此，即使line box在同一個(gè)IFC里通常有相同的寬度。如果他們橫向間距會(huì)因float減少，它們寬度可能會(huì)不一樣。line box在同一個(gè)IFC高度可能不一樣（e.x.：含有不同高度的image）

When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the "text-align" property. If that property has the value "justify", the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

當(dāng)內(nèi)聯(lián)盒子的總寬度比line box小的時(shí)候，它們的水平分布由"text-align"屬性決定。如果該屬性值為"justify"，用戶可以拓寬在inline box的空間和文字。

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

如果內(nèi)聯(lián)盒子的寬度超過(guò)了line box，內(nèi)聯(lián)盒子會(huì)被分解成幾個(gè)盒子，然后分布在幾個(gè)line box里面。如果內(nèi)聯(lián)盒子不能被分解（e.g.，如果內(nèi)聯(lián)盒子有單個(gè)單詞、或者有特殊的換行規(guī)則，或者被"white-space"的"nowrap"、"pre"影響），它會(huì)超過(guò)line box。

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

如果一個(gè)內(nèi)聯(lián)盒子被分解了，margins、borders、和padding在他們被分解的位置沒(méi)有視覺(jué)效果。

Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

由于雙向文本處理（bidirectional text processing）內(nèi)聯(lián)盒子有可能在同一個(gè)line box里被分解成不同的盒子。

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

line box主要被用來(lái)在IFC內(nèi)裝載內(nèi)聯(lián)級(jí)內(nèi)容。不包含文本、不預(yù)留空白、沒(méi)有非零margins,padding,border 或者其他flow內(nèi)容（images、 inline block 或者 inline tables）的內(nèi)聯(lián)元素的line box必須被當(dāng)成零高度的line box，主要為了定位其他在其里面的元素，還有必須被當(dāng)成不存在的或者其他目的（這是什么鬼？？？看不懂）。

參考資料：

W3C規(guī)范：http://www.w3.org/TR/CSS2/visuren.html
MDN的介紹：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model
知乎一個(gè)很棒的答案：https://www.zhihu.com/question/20086234