Tell me about the formatting context in CSS

First, what is FC?
Fc,formatting contexts is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering rules that determine how the child elements will be positioned, and the relationships and interactions with other elements.
Second, BFC
Bfc,block formatting contexts, block-level formatting context. BFC is an isolated render area on the page, and the child elements inside the container do not affect the outside elements on the layout, and vice versa.
1. Conditions for triggering BFC

2, the characteristics of BFC

A, BFC can prevent margin folding, B, BFC can contain floating elements, C, BFC can prevent elements from being covered by floating elements, D, BFC as far as possible the element is not a row, inner elements are block-level elements, including Div ul ol li DL DT DD H1 H2 H3, H4 h5 h6 p.

3, the use of BFC
For example, a common multi-column layout, with block-level elements floating, inner elements unaffected by the external environment.
Third, IFC
Ifc,inline formatting contexts, inline formatting context. The IFC's line box height is determined by the maximum actual height of the padding/margin, unaffected by vertical direction. There can be no block-level elements in IFC, and if a block-level element is inserted (such as inserting a div in P), two anonymous blocks are separated from the Div, resulting in two IFC, each of which is represented as a block-level element, arranged vertically with a div.
1. Conditions that trigger IFC

A, display value is Inline-blocks,inline;b, set font-size;c, set line-height, row height refers to the vertical distance between the baseline of the context line; D, set Height;e, Set the Vertical-aligin.

2. Features of IFC
Let the element be on the same line as possible, the inner element is an inline element, and contains a b span I b em img Input select Strong.
3, the use of IFC
such as horizontal center, set text-align:center, vertical center set its vertical-align:middle.

Third, FFC
Ffc,flex formatting contexts, an adaptive formatting context, an element with display values of flex or Inline-flex will generate an adaptive container (Flex container).
1. Conditions for triggering the FFC
The display value is flex.
2, the characteristics of the FFC
An elastic telescopic box was declared.
3, the use of FFC
Responsive layout.

Iv. GFC
Gfc,gridlayout formatting contexts, grid layout formatting context, when setting display value to grid for an element, this element will get a separate render area, we can pass in the grid container (grid Container) defines the grid definition row (grid definition rows) and Grid definition column (grid definition Columns) properties on the grid item (grid row) and Grid columns (grid Columns) defines the location and space for each grid item (grid item).
So what's the use of GFC, and what's the difference with table? The first is also a two-dimensional table, but GridLayout will have richer properties to control the rows and columns, control alignment, and finer rendering semantics and control.

CSS2.1 only BFC and IFC, CSS3 in the GFC and FFC.

Tell me about the formatting context in CSS