The net read a lot of articles, just want to say a word: “really what all did not understand”. The following is my personal understanding, there is something wrong can be put forward.

Before describing the differences between them, what are the BFC, IFC, GFC, FFC?

  • We know that elements have inline elements, block-level elements, and inline-block-level elements. When rendered on the page, they are all positioned, arranged, etc., differently, because they are rendered differently according to the internal formatting context, namely BFC and IFC. After CSS3 added Grid layout and Flex layout, so also ushered in GFC, FFC

Line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

The content below is found on the Internet, and it is basically the same

BFC (Block Formatting Contexts) : Block Formatting Context

An isolated rendering area on the page, so how is it generated? BFC can trigger elements like float, position, overflow, display: table-cell/ inline-block/table-caption; What does the BFC do? For example, implement a multi-column layout

IFC (Inline Formatting Contexts) : Formatting Contexts

The height of the line box in an IFC is calculated from the actual height of the elements it contains in the line (not affected by the vertical padding/margin). The line box in an IFC is usually close to the entire IFC from left to right, but can be disturbed by float elements. The float element is placed between the IFC and the line box, making the line box shorter. Multiple line boxes under the same IFC will have different heights

It is impossible to have block-level elements in IFC. When block-level elements are inserted (for example, div is inserted in P), two anonymous blocks will be generated and separated from div, that is, two IFC will be generated. Each IFC is presented as a block-level element and arranged vertically with div.

So what is the use of IFC in general?

Horizontal Center: When a block is to be horizontally centered in the environment, setting it to inline-block will result in IFC in the outer layer, which can be horizontally centered with text-align.

Vertical-centered: Create an IFC, use one element to push the height of the parent element, then set it to vertical-align:middle. Other inline elements can be vertically centered under the parent element

GFC: GridLayout Formatting Contexts

When an element’s display value is set to Grid, the element will get a separate rendering area, We can define grid rows on Grid Item by defining Grid Definition Rows on Grid Container and Grid Definition Columns on Grid Item, respectively Row and Grid Columns define the location and space for each Grid Item. So what’s the use of a GFC, and how is it different from a table? It’s the same two-dimensional table at first, but GridLayout will have richer properties to control rows and rows, control alignment, and finer rendering semantics and controls

FFC (Flex Formatting Contexts) : Adaptive Format Contexts

Display elements with a value of flex or inline-flex will generate an adaptive flex container. Unfortunately, this is a nice attribute only supported by Google and Firefox, but it works fine on mobile, at least in Safari and Chrome. After all, these two are king on mobile. The Flex Box consists of a Flex container and Flex items. You can get a flex container by setting the element’s display attribute 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 flex container is a flex item. There can be any number of flex items. Everything outside the flex container and inside the flex project is unaffected. Simply put, Flexbox defines how flex items should be laid out in a flex container

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/