[譯]:BFC與IFC

BFC與IFC

BFC與IFC的參與者

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)

BFC

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

BFC的特性

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.

IFC

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元素的匿名文字。

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

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
考慮下面的栗子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

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