BFC is often asked in interviews, and there are many articles on blogs that mention BFC. At least after I read it, there is no introduction to how browsers normally stream typesetting elements, and what roles BFC and IFC play in typesetting elements. Therefore, understanding BFC and IFC must start from the basic concepts of the browser before typesetting.

What are tags, elements, boxes

The concepts of tags, elements and boxes basically correspond to HTML text, DOM generation and CSSOM and layout. In the text stage, each closed or self-closed element (token) is called a tag. After text parsing (Parse), each node in the DOM tree is called an element (DOM element). After parsing, CSSRule(this process is usually a character stream -token stream – generated element and CSS matching calculation). Match to the corresponding element node, calculate layout to get the size of the element occupied by the position, which is called the box.

For now, at least, we should know that boxes are the basic unit of layout elements in browsers.

The process by which the browser generates boxes

In the CSS standard, there are block-level elements and inline-level elements, which we call block-level elements and inline elements.

In normal streaming typesetting, each block-level element is arranged in an exclusive line, line by line, and each line element or text is arranged in order, not in order of line feed.

Now, if we stand in the process of generating boxes, we put the elements in the layout of the following steps:

  • When block-level elements are encountered: a block-level-boxs block box is generated, with the block boxes arranged up and down.
  • When an in-line element or text is encountered: an inline-boxs line box is generated. When the container has no more elements, a new line box is created to arrange the new in-line elements in order.

At least at present, the relationship between boxes and elements should be that the element will generate boxes according to its own type. A block-level element will generate a block-level box exclusive row, while multiple inline elements will generate at least one or more row boxes, and the row boxes are arranged up and down successively. A piece of text produces one or more line boxes.

  • block-level-boxs
  • inline-boxs

About box model

With boxes, we have to say that the next concept box model we are very familiar with block level box model is as follows:

The row model is shown below:

At least the box model includes elements margin, padding, border, and content

The row model involves the concepts of line-height, top, bottom, middle, text-top, text-bottom, and base-line, and corresponds to the attributes of the CSS vertical-align.

BFC and IFC

  • We know the concepts and relationships of tags, elements, and boxes.
  • We know how the elements make boxes.

Then the browser selects the corresponding box model, and calculates the size of the box, the space between boxes and other information. However, both BFC and IFC have a state that Contex is currently dependent on, and this state is based on the relationship between the child element and the parent element of the element, which in turn generates the box relationship. Context should be the parent box of the current layout box block-container.

The box depends on the parent box of the context environment when typesetting, and new boxes can be generated inside the box or element. Typesetting of these new boxes according to the box model, thus generating new context environment is called BFC and IFC.

Whereas the current BFC and IFC are context-dependent, the parent boxes are called block-containers. From an element perspective, the inside of an element can continue to be arranged in normal flow, resulting in block-containers.

The final decision is whether to trigger BFC or BFC merger.

Before we get clear, let’s look at a concrete example. Let’s look at the so-called trigger BFC example, as shown below:From the figure above, the space between the upper and lower elements is 20px, which is also used as white space between elements in the design of the side margin, so the margin between elements will not be superimposed.

Context merge chestnut

After removing the parent display hidden attribute value, the white space of the child element is merged with the white space of the parent element, that is, the BFC of the parent element and the BFC of the child element are merged.

Let’s look at the document definition:There is only one case where no new formatting context can be created in a box. If the box is a Block Conatiner box and is a Block box, and the element dispaly attribute is visible, no new formatting context can be created in the box. If the block-level element display is visible, the box’s parent formatting context is merged, and the child element margin and the parent element margin are collapsed. .

Context merge with float chestnut

This concludes our BFC and summarizes the concepts involved

  • Tags, elements, boxes
  • Box model, row model
  • Landing, the IFC
  • block-level boxs inline-level boxs block-level element inline-level element
  • Block box, block container