FC（Formatting Context）
It is a concept W3C CSS2.1 specification, defined is a rendering of the page area, and a set of rendering rules that determine how to position its child elements , as well as relationships and interactions and other elements .
BFC（block formatting context）
Literally translated as "block-level formatting context"
W3C Original:
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).
Organized into Chinese:
Box will be inside the vertical direction, disposed one behind.
Box in the vertical direction by a distance
margindetermined. Two belong to the same neighboring Box of BFCmarginwill overlapThe left edge of each outer element (
margin-left), (comprising blocks with the leftcontain box left) contact with (from left to right to format, or vice versa). The same is true even if there are floating. Unless the elements themselves form a new BFC.BFC and a region not
float boxoverlapped.BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements. And vice versa is also true.
Calculating the height of the BFC, the floating elements are also involved in the calculation
IFC（inline formating context）
Literally translated as "inline formatting context", the IFC's line box (frame), the height of its highest row containing elements calculated from the actual height (padding / margin is not affected by the vertical direction).
Within the context of the row format, block (Boxes) arranged horizontally one by one, starting at the top of the containing block. In the horizontal direction margin, border and paddingis retained between the frame. Block may be aligned in the vertical direction in different ways: aligned top or bottom thereof, or wherein the baseline of the text is aligned. Rectangular regions include those boxes will form a line, called the row block.
FFC（flxe formating context）
Literally translated as "adaptive formatting context", display element is inline-flex, or flex will generate adaptive container (flex container).
GFC（GridLayout formating context）
Literally translated as "network layout formatting context", when a display element is provided in the grid, this element will be given a separate rendering area, we can mesh on the container (Container grid) defines a grid definition lines (grid definition rows) and columns define a grid (grid definition columns) the attributes of each item in the grid (grid item) defined on the grid lines (grid row) and the column grid (grid columns) for each item grid (grid item) defines the location and space.