Formatting Context

Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.

A BFC is an independent layout environment in which the layout of elements is independent, and in a BFC, block boxes and row boxes (row boxes are made up of all inline elements in a row) are arranged vertically along the border of their parent element.

Formatting Context includes Formatting Context

  1. BFC (Block level)
  2. IFC
  3. FFC
  4. GFC

BFC

Block formatting context (BFC). It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

BFC layout rules

  • The internal boxes will be placed vertically, one on top of the other.

  • The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.

  • The left side of the margin box of each box (block box vs. row box) touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.

  • The region of the BFC does not overlap with the float box.

  • A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.

  • When calculating the height of the BFC, floating elements are also involved.

How do I create a BFC

  1. The value of float is not None.
  2. The value of position is not static or relative.
  3. The display value is inline-block, table-cell, flex, table-caption, or inline-flex
  4. The overflow value is not visible

Landing the role of

  1. Use BFC to avoid margin overlap.

IFC

IFC(Inline Formatting Context) The height of an IFC’s line box is calculated from the actual height of the elements it contains in the line (regardless of the vertical padding/margin). The line box in an IFC is generally close to the entire IFC, but is disturbed by float elements. Float elements are placed between IFC and line box, making the line box width shorter. Multiple line boxes under the same IFC will have different heights. It is impossible to have block-level elements in IFC. When inserting block-level elements (such as div in P), two anonymous blocks will be generated and separated from div, that is, two IFCs will be generated, and each IFC will appear as block-level elements and be vertically aligned with div. So what does IFC do in general? Horizontally centered: When a block is horizontally centered in the environment, setting it to inline-block produces an IFC in the outer layer, and text-align makes it horizontally centered. Vertically centered: Create an IFC, use one of the elements to offset the height of the parent element, and then set it to vertical-align:middle. Other elements in the row can be vertically centered under the parent element.

IFC layout rules:

The boxes are placed horizontally, one after the other, starting at the top of the containing block. When placing these boxes, the space they take up in horizontal margins, borders, and margins is taken into account. Vertically, these boxes may be aligned in different ways: they may be aligned at the bottom or top, or they may be aligned with the text baseline within them. A rectangular area that can contain all the boxes on a row is called the row box. Horizontal margin, padding, and border are valid, but vertical ones are invalid. Width and height cannot be specified. The width of the line box is determined by the inclusion block and the float that exists. The height of a line box is determined by the rules described in the row height calculation chapter.

GFC

GFC(GridLayout Formatting Context) is an element that will get a separate rendering area if it is set to grid. We can define grid rows on grid Items by defining grid Definition Rows on grid Containers and grid Definition Columns properties, respectively Row and Grid Columns define the location and space for each grid item. So what’s the use of GFC? What’s the difference between GFC and TABLE? It’s also a two-dimensional table, but GridLayout has richer properties to control rows and columns, control alignment, and finer rendering semantics and controls.

FFC

FFC(Flex Formatting Context) can be translated as “adaptive Formatting context”. Display elements with the value Flex or inline-flex will generate Flex Containers. Unfortunately, this cool property is only supported by Google and Firefox. But it’s still good enough on mobile, at least safari and Chrome, which are king on mobile. The Flex Box consists of a Flex container and a Flex project. You can get a flex container by setting the display attribute of the element 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 a scaling container is a scaling item. There can be any number of scale items. All elements outside the flex container and inside the flex project are unaffected. In a nutshell, Flexbox defines how scalable items should be laid out within a scalable container.

reference

  • Blog.csdn.net/sinat_36422…