Tips: The post has been deleted due to a BUG before digging and the comments have disappeared

The full text is about 3000 words and takes about 6 minutes to read

BFC, Block Formatting context (BFC), is an obscure concept in CSS. Let’s try to understand it thoroughly in simple language.

The box model

The CSS box model describes rectangular boxes generated from elements in the document tree and the corresponding visual formatting model. In simple terms, the box model defines a rectangular box. When we need to lay out a document, the browser’s rendering engine will represent all elements as rectangular boxes based on the box model. The appearance of the boxes is determined by CSS.

A standard box consists of four parts, from inside to outside: content, inside margin, border, and margin:

In the standard box model, the size of the content area can be explicitly controlled by width, min-width, max-width, height, min-height, max-height, that is, CSS sets the width and height of the element only contain the content area. You may have heard of weird box models, which first appeared in Internet Explorer, also known as IE box models. When box-sizing is set to border-box, elements appear weird box models, where the width and height of the element contains the content, inner margins, and borders.

Visual formatting model

The CSS visual formatting model describes how boxes are generated. In simple terms, it defines the calculation rules for box generation by which document elements are converted into boxes.

The layout of each box is determined by such factors as size, type, positioning, child or sibling elements of the box, size and position of the viewport, and so on.

The calculation of visual formatting model depends on the boundary of a rectangle, namely containing blocks, such as:

<table>
  <tr>
    <td></td>
  </tr>
</table>
Copy the code

In the code snippet above, table and TR are both contain blocks, with table being a contain block for TR and TR being a contain block for TD.

Note that the box is not bound by the contain block. When the layout of the box goes outside the contain block, it is called overflow.

The visual formatting model defines the generation of boxes, which mainly include block-level boxes, inline boxes and anonymous boxes.

Block-level elements

CSS property value display block, list-item, table element.

Block-level box

Block-level boxes have the following features:

  • CSSAttribute valuesdisplay 为 block.list-item.table, it is a block-level element
  • Visually, block-level boxes appear as vertically arranged blocks
  • Each block-level box participatesBFCThe creation of
  • Each block-level element generates at least one block-level box, called the master block-level box. Some elements may generate additional block-level boxes, such as<li>Is used to store bullet points

Inline level elements

CSS property value display is inline, inline-block, inline-table elements.

The inline boxes

Inline boxes have the following features:

  • CSSAttribute valuesdisplay 为 inline.inline-block.inline-table, it is an in-line element
  • Visually, inline boxes are arranged in multiple rows with other inline level elements
  • All substitutable elements (displayA value ofinline, such as<img>.<iframe>.<video>.<embed>Etc.) generated boxes are inline boxes that participateIFC (Inline formatting Context)The creation of
  • All non-replaceable inline elements (displayA value ofinline-block 或 inline-table) generated boxes are called atomic inline boxes and do not participateIFCcreate

Anonymous box

Anonymous boxes are boxes that cannot be selected by CSS selectors. For example:

<div>Anonymous box 1<p>Block boxes</p>Anonymous box 2</div>
Copy the code

In the code snippet above, both the div element and the P element generate a block-level box, and two anonymous boxes are generated before and after the P element.

All inheritable CSS property values in the anonymous box are inherit, and all non-inheritable CSS property values are Initial.

The positioning

CSS page layout techniques allow us to pick up elements in a web page and control their placement relative to the normal layout flow (normal flow), surrounding elements, parent containers, or main viewports/Windows. Technical layout is macroscopically affected by positioning scheme, including Normal Flow (also called Normal Flow, Normal layout Flow), Float, Position technology (Position).

Normal flow

The browser’s default HTML layout, in which the browser does not do any layout control over the page,

Normal streams are triggered when position is static or relative and float is None. Normal streams have the following properties:

  • In normal flow, all the boxes are arranged one after the other
  • BFCIn, the box willThe verticalarrangement
  • IFCIn, the box willAcross thearrangement
  • Static positioning (position 为 static), the box position is the layout position in the normal stream
  • Relative positioning (position 为 relative), the offset position of the box bytop.right.bottom.leftDefinition,Even if there is an offset, the original position remains, and other normal streams cannot occupy this position

floating

  • In Floating positioning, a Box is called a Floating Box
  • Boxes are at the beginning or end of the current line
  • Normal flows will surround the float box unless setclearattribute

Positioning technology

Positioning techniques allow us to move an element from its original location on the page to another location precisely. There are four types of positioning: static positioning, relative positioning, absolute positioning, and fixed positioning.

Static positioning

The default position is static, when the element is in a normal stream.

Relative positioning

Relative positioning is used to fine-tune the layout. When position is relative, elements use relative positioning. In this case, you can use the top, right, bottom, and left attributes to fine-tune the position of elements and set their offset relative to themselves.

Absolute positioning

In absolute positioning, boxes are removed from normal streams without affecting the layout of other normal streams. Absolute positioning has the following characteristics:

  • Attributes of an elementposition 为 absolute 或 fixed, it is the absolute positioning element
  • Its positioning relative to its containing block can be passedtop.right.bottom.leftProperty to fine-tune the position of the element and set itThe offset relative to the containing block
  • position 为 absoluteElement, whose location will be relative to the nearest onerelative,fixed 或 absoluteIs the parent element of thebody

Fixed position

Similar to the absolute location scheme, the only difference is that its containing block is the browser window.

Block level formatting context

Through the knowledge of CSS box model, positioning, layout and so on, we know that the concept of BFC actually comes from the visual formatting model,

It is part of the CSS visual rendering of the page and is used to determine the layout of the block-level box and an area of the floating interaction.

Landing the creation of

The following elements create the BFC:

  • The root element (<html>)
  • Float element (floatDon’t fornone)
  • Absolute positioning element (position 为 absolute 或 fixed)
  • Table titles and cells (display 为 table-caption.table-cell)
  • Anonymous table cell elements (display 为 table 或 inline-table)
  • Inline block elements (display 为 inline-block)
  • overflowThe value of thevisibleThe elements of the
  • Elastic element (display 为 flex 或 inline-flexThe immediate child of the element of
  • Grid elements (display 为 grid 或 inline-gridThe immediate child of the element of

This is how the CSS2.1 specification defines BFC triggering. In the latest CSS3 specification, elastic elements and Grid elements create F(Flex)FC and G(Grid)FC.

The scope of the landing

A block formatting context contains everything inside of the element creating it, that is not also inside a descendant element that creates a new block formatting context.

Literally, a BFC contains all the children of the element that created it, but not the inner elements of the child that created the new BFC.

In simple terms, if a child element creates a new BFC, then its contents do not belong to the previous BFC. This reflects the idea of BFC isolation. Let’s use table as an example:

<table>
  <tr>
    <td></td>
  </tr>
</table>
Copy the code

Suppose the BFC created by the table element is denoted as BFC_table, and the BFC created by the tr element is denoted as BFC_tr. According to the rules, the ranges of the two BFC are as follows:

  • BFC_tr:tdThe element
  • BFC_table: onlytrElement, not includedtrIn thetdThe element

That is, an element cannot exist in both BFC’s.

The characteristics of landing

In addition to creating an isolated space, the BFC has the following features, with the CodePen sample link address, to be understood in conjunction with the example:

  • BFCThe internal block-level boxes are arranged vertically, one after the other1.
  • The sameBFCMargin collapses may occur on adjacent block-level elements below, creating new onesBFCMargin folding can be avoided2.
  • The left side of each element’s margin box touches the left side of the border box containing the block (the opposite is true if formatted from right to left), even if there is a float
  • Floating box areas will not andBFCoverlap(4)
  • To calculateBFCThe floating element is also involved in the calculation5.

The application of the landing

Adaptive multi-column layout

Using features ③ and ④, the middle column creates a BFC, and the left and right columns float after the width is fixed. Since the left side of the margin box of the box is in contact with the left side of the border box containing the block, and the area of the floating box does not overlap with the BFC, the width of the middle bar is adaptive, for example.

Prevent margin folding

Using feature (2), creating a new BFC can prevent margin folding by placing adjacent block-level boxes under different BFC, for example.

Remove the floating

Using feature 5, floating elements in the BFC will also participate in the height calculation, which can clear the floating elements in the BFC, example.

Write in the last

This article first in my blog, uneducated, unavoidably have mistakes, the article is wrong also hope not hesitate to correct!

If you have questions or find mistakes, you can ask questions and errata in the comments section,

If you like or are inspired by it, welcome star and encourage the author.

(after)