What are the formatting context (FC) types in CSS layout? Introduction to formatting context (FC) types-CSS Tutorial-php.cn

What is formatting context (FC)? Formatting Context (Formatting Context) refers to a rendering area in the page, which has a set of rendering rules, which determines how its sub-elements are positioned, as well as their interaction and interaction with other elements. So what are the formatting contexts in CSS layout? ? The following article introduces you to several types of formatting context.

Block Level Format Context (BFC):

What is BFC? Block Formatting Context, block-level formatting context, is an independent block-level rendering area. This area has a set of rendering rules to constrain the layout of block-level boxes and has nothing to do with the outside of the area.

BFC’s constraint rules

1. The internal BOX will be placed one after another in the vertical direction;

2. The distance in the vertical direction is determined by margin. (The complete statement is: the margins of two adjacent BOXs belonging to the same BFC will overlap, regardless of the direction.)

3. The left margin of each element is consistent with the left boundary of the containing block. touching (left to right), even for floated elements. (This shows that the child elements in BFC will not exceed its containing block, and the element with absolute position can exceed the boundary of its containing block);

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

5. When calculating the height of BFC, floating child elements also participate in the calculation;

6. BFC is an isolated independent container on the page, and the child elements in the container will not be affected. External elements, and vice versa;

Application of BFC

Preventmarginfrom overlapping
Prevent height collapse caused by floating

How to generate BFC

## The value of #floatis notnone; the value of
overflowis notvisible;## The value of
#display
isinline-blocktable-celltable-caption;## The value of
is
absoluteorfixed;##display: Table also thinks that BFC can be generated? In fact, Table will generate an anonymous table-cell by default, and it is this anonymous table-cell that generates BFC.

Inline Formatting Context (IFC):

What is IFC? IFC (Inline Formatting Contexts) literally translates as "inline formatting context". The height of IFC's line box (wire frame) is calculated from the highest actual height of the inline elements it contains (not affected by vertical padding/margin)

Features of IFC

1. The line box in IFC is generally close to the entire IFC on the left and right sides, but it will be disturbed by float elements. The float element will be located between the IFC and the line box, shortening the width of the line box.

2. It is impossible to have block-level elements in IIFC. When inserting block-level elements (such as inserting a div in p), two anonymous blocks will be generated separated from the div, that is, two IFCs will be generated. Each IFC appears as a block-level element, arranged vertically with the div.

Application of IFC

Horizontal centering: When a block is to be horizontally centered in the environment, set it to

inline-block

IFC
in the outer layer, andtext-aligncan be used to center it horizontally.Vertical centering: Create an
IFC
vertical-align:middle
, other inline elements can be vertically centered under this parent element.

GFC(GridLayout Formatting Contexts)Literally translated as "grid layout formatting context", when the

display

value is set togridfor an element, this element will get an independent rendering area. We can pass Define grid definition rows(grid definition rows)and grid definition columns(grid definition columns)properties on the grid container(grid container). Define grid row(grid row)and grid column(grid columns)on grid item(grid item)for each grid item(grid item)Define position and space.GFCwill change the traditional layout mode, it will change the layout from one-dimensional layout to two-dimensional layout. Simply put, with

GFC

, the layout is no longer limited to a single dimension. At this time, it is extremely easy for you to achieve layout effects such as nine-square grid and puzzle.Adaptive Formatting Context (FFC):

FFC (Flex Formatting Contexts) literally translates as "adaptive formatting context", display Elements with a value of flex or inline-flex will generate a flex container.

Flex Box consists of flex containers and flex projects. You can get a flex container by setting the element's display property to 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 an inline element.

Each child element in the flex container is a flex item. There can be any number of flex items. All elements outside the flex container and within the flex project are unaffected. Simply put, Flexbox defines how flex items should be laid out within a flex container.

The difference between adaptive formatting context (FFC) and block-level formatting context (BFC):

FFC is somewhat similar to BFC, but there are still the following differences:

1. Flexbox does not support the two pseudo-elements::first-line and ::first-letter

2. Vertical-align has no effect on child elements in Flexbox

3. The float and clear attributes have no effect on child elements in Flexbox, nor will they cause the child elements to break away from the document flow (but they have an effect on Flexbox!)

4. Multi-column layout (column- *) It is also invalid in Flexbox, which means that we cannot use multi-column layout in Flexbox to arrange the child elements under it

5. The child elements under Flexbox will not inherit the width of the parent container