What are the format context (FC) types in a CSS layout? Description of type of format context (FC)

What is a format context (FC)? A formatting context, which refers to a rendering area on a page, has a set of rendering rules that determine how its child elements are positioned and how they relate to and interact with other elements, so what are the formatting contexts in the CSS layout? formatting. The following article gives you a description of the types of formatting contexts.

Block-level format context (BFC):

What is BFC? Blocks formatting context, block-level formatting contexts, a separate block-level rendering area that has a set of rendering rules to constrain the layout of block-level boxes, regardless of the outside of the area.

Constraint rules for BFC

1. The inner box will be placed one by one in the vertical direction;

2. The distance in the vertical direction is determined by margin. (The complete argument is that the margin of two adjacent boxes belonging to the same BFC overlap, regardless of direction.) ）

3. The left margin of each element touches the left edge of the containing block (left to right), even if it is a floating element. (This means that the child element in BFC does not exceed its containing block, while the element position to absolute can exceed its containing block boundary);

4. The area of BFC will not overlap with the elements of float;

5. When calculating the height of the BFC, the floating child elements are also involved in the calculation.

6, BFC is a separate isolated container on the page, the child elements inside the container will not affect the outside elements, and vice versa;

Application of BFC

• Prevent margin overlapping

• Prevents the height collapse caused by the float

How to generate BFC

• floatThe value is not none ;

• overflowThe value is not visible ;

• displayThe value is inline-block table-cell table-caption ;

• positionThe value is absolute or fixed ;

Display:table also think you can generate BFC? In fact, the table will generate an anonymous Table-cell by default, and it is this anonymous table-cell that generates the BFC.

Inline formatting context (IFC):

What is IFC? IFC (Inline formatting contexts) is the "inline formatting context", and the IFC's Line box (wireframe) height is calculated from the highest actual height of its containing inline elements (unaffected by vertical padding/margin)

IFC Features

1, the IFC Line box is generally around the entire IFC, but will be disturbed by the float element. The float element is located between the IFC and the Line box, making the Line box width shorter.

2, IIFC can not have block-level elements, when inserting block-level elements (such as insert Div in P) will produce two anonymous blocks separated from the Div, that is, two IFC, each of the IFC external performance as block-level elements, and div vertical arrangement.

Application of IFC

1. Center horizontally: When a block is centered horizontally in the environment, it is created in the inline-block outer layer IFC and text-align can be centered horizontally.

2. Center vertically: Creates one, using one of the elements to open the IFC height of the parent element, then setting it, and the vertical-align:middle other inline elements can be vertically centered under this parent element.

Grid layout formatting context (GFC)

GFC(GridLayout Formatting Contexts)As a "Grid layout formatting context", when a value is set for an element display grid , this element will get a separate render area, and we can define the column properties in the grid item by defining the （grid container） grid definition row （grid definition rows） and grid （grid definition columns） on the grid container Define （grid item） grid rows （grid row） and grid columns on the definition （grid columns） of （grid item） location and space for each grid item.

GFCWill change the traditional layout mode, he will make the layout from one-dimensional layout into a two-dimensional layout. Simply put, GFC after that, the layout is no longer confined to a single dimension. This time you want to achieve similar nine gongge, puzzles and other layout effects appear exceptionally easy.

Adaptive format Context (FFC):

The FFC (flex formatting contexts) literal is the "adaptive formatting Context", and an element with the display value of Flex or Inline-flex will generate an adaptive container (Flex container).

The Flex Box consists of a telescopic container and a telescopic project. A telescopic container can be obtained by setting the display property of the element for flex or Inline-flex. A container set to Flex is rendered as a block-level element, while a container set to Inline-flex is rendered as a inline element.

Each child element in a telescopic container is a scaling project. The scaling project can be any number. All elements inside and outside the telescopic container are unaffected. Simply put, Flexbox defines how the scaling items in the telescopic container should be laid out.

The difference between an adaptive format context (FFC) and a block-level format context (BFC):

The FFC is a bit similar to BFC, but there are several differences:

1, Flexbox does not support:: First-line and:: First-letter these two pseudo-elements

2, Vertical-align to Flexbox in the child element is no effect

3. The float and clear properties have no effect on child elements in Flexbox, and do not leave the child elements out of the document flow (but have an effect on Flexbox!). )

4, Multi-column layout (column-*) in the Flexbox is also invalid, that is, we can not use multi-column layout in the Flexbox to arrange the sub-elements below it

5, child elements under Flexbox do not inherit the width of the parent container