摘要：塊級盒參與塊級格式上下文行內級盒參與行級格式上下文。兩個相鄰盒子的垂直間距決定于屬性。水平和在這些盒子中被平分。的寬度由浮動情況和它的包含塊決定。當一個行內盒子被分割，分割發生則和便沒有了視覺效果。參考神奇背后的原理清除浮動與與

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
在普通流中的盒子會參與一種格式上下文,這個盒子可能是塊盒也可能是行內盒,但不可能同時是塊盒又是行內盒。塊級盒參與塊級格式上下文(BFC),行內級盒參與行級格式上下文(IFC)。

Block formatting contexts(BFC)

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.

浮動,絕對定位元素,和display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個值已經被傳播到視口),以及當overflow不為visible的塊盒才會為它的內容創建新的BFC。

為了看得更清晰,梳理如下

float 的值不為 none

position 的值不為 static 或 relative

display 的值為 table-cell、table-caption、inline-block、flex 或 inline-flex

overflow 的值不為 visibility

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.

1.在BFC中,盒子都是從它的包含塊的頂部一個一個的垂直放置的。兩個相鄰盒子的垂直間距決定于margin屬性。在BFC中,兩個相鄰塊級盒子之間垂直方向上的外邊距是會塌陷的。

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

2.在BFC中,每個盒子的左外邊界挨著包含塊的左邊界(對于從右到左的格式化,則為右邊界互相挨著)。即使是存在浮動元素也是如此(即使一個盒子的行盒是因為浮動而收縮了的),除非這個盒子建立了一個新的BFC(在某些情況下這個盒子自身會因為浮動而變窄)。

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

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

在IFC中，盒子水平放置，一個接著一個，從包含塊的頂部開始。水平margins,borders,和padding在這些盒子中被平分。這些盒子也許通過不同的方式進行對齊:他們的地步和頂部也許被對齊，或者通過文字的基線進行對齊。矩形區域包含著來自一行的盒子叫做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.

line box的寬度由浮動情況和它的包含塊決定。line box的高度由line-height的計算結果決定。

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總是足夠高對于包含在它內的所有盒子。然后，它也許比包含在它內最高的盒子高。(比如，盒子對齊導致基線提高了)。當盒子B的高度比包含它的line box的高度低，在line box內的B的垂值對齊線通過"vertical align"屬性決定。當幾個行內級盒子在一個多帶帶的line box內不能很好的水平放置，則他們被分配成了2個或者更多的垂直重疊的line boxs.因此,一個段落是很多個line boxs的垂直疊加。Line boxs被疊加沒有垂直方向上的分離(特殊情況除外)，并且他們也不重疊。

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

通常，line box的左邊緣挨著它的包含塊的左邊緣，右邊緣挨著它的包含塊的右邊緣。然而，浮動盒子也許會在包含塊邊緣和line box邊緣之間。因此，盡管line boxs在同樣的行內格式上下文中通常都有相同的寬度(就是他的包含塊的寬度)，但是水平方向上的空間因為浮動被減少了，它的寬度也會變得復雜。Line boxs在同樣的行內格式上下文中通常在高度上是多樣的(比如，一行也許包含了一個最高的圖片然后其他的也可以僅僅只包含文字)

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.

當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由"text align"屬性決定。如果屬性是"justify"，用戶代理可能會拉伸空間和文字在inline boxs內。

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.

當一個行內盒子超過了line box的寬度，則它被分割成幾個盒子并且這些盒子被分配成幾個橫穿過的line boxs。如果一個行內盒子不能被分割。則行內盒子溢出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).

當一個行內盒子被分割，分割發生則margins,borders,和padding便沒有了視覺效果。

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

在同樣的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 boxs在行內格式上下文中檔需要包含行內級內容時被創造。Line boxs包含沒有文字，沒有空格，沒有帶著margins,padding和borders，以及沒有其他在流中的內容(比如圖片，行內盒子和行內表格)，也不會以新起一行結尾。對于在他們內的任何盒子的位置都以他們決定并且必須將他們視作沒有高度的line boxs。

栗1

Here is an example of inline box construction. The following paragraph (created by the HTML block-level element P) contains anonymous text interspersed with the elements EM and STRONG:

這里是一個inline box結構的栗子。下面的段落包含著散布在EM和STRONG元素的匿名文字。

Several emphasized words appear
in this sentence, dear.

The P element generates a block box that contains five inline boxes, three of which are anonymous:

Anonymous: "Several"

EM: "emphasized words"

Anonymous: "appear"

STRONG: "in this"

Anonymous: "sentence, dear."

P元素生成了一個塊級盒子，它包含五個inline boxs，其中有3個是匿名的。如下。

匿名 : "Several"

EM : "emphasized words"

匿名 : "appear"

STRONG : "in this"

匿名 : "sentence, dear"

To format the paragraph, the user agent flows the five boxes into line boxes. In this example, the box generated for the P element establishes the containing block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box:

為了格式化段落，用戶代理將5個盒子都匯流入line boxs，在這個栗子中，由P元素生成的盒子為line boxs的包含塊。如果包含塊足夠的寬，所有的inline boxs都將剛好放在一個單行的line box中，如下:

Several emphasized words appear in this sentence, dear.

If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows:

如果沒有，inline boxes將被分離并被分別分配到不同的line boxs中。上面的段落可能會被分割成下面這樣:

Several emphasized words appear
in this sentence, dear.
或者，這樣
Several emphasized
words appear in this
sentence, dear.

In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2.

在前面的栗子中，EM box是被分割成了2個EM boxs(叫他們"split1"和"split2")。外邊距，邊界，內邊距和文字修飾效果作用在"split1"之后或者"split2"之前都沒有任何效果。

栗2
考慮下面的栗子。

  
    
    
  
  
    
Several emphasized words appear here.
  

Depending on the width of the P, the boxes may be distributed as follows:
依賴P 的寬度，盒子可能會被分割成下面這樣。

The margin is inserted before "emphasized" and after "words".

The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case.

外邊距作用在了"emphasized"之前和"words"單詞之后

內邊距作用在了"emphasized"的前面，上面，和下面，和"words"單詞的后面，上面和下面。多帶帶的虛線框分別被渲染在了每個事例的三個邊上。

參考

visual-formatting

BFC神奇背后的原理
CSS清除浮動與BFC
BFC與hasLayout
Line-Height