What is landing

Block Formatting Context (BFC) :

  • blockBlock-level box
  • Formatting ContextA concept in the CSS2.1 specification that refers to a rendered area of a page and has a set of rendering rules that determine how its children will be positioned and how they will interact with other elements

Visual formatting model (visual formatting model)

The visual formatting model is an actual algorithm that converts the elements of a document into boxes based on the Basic Box Model, specifying how the client handles the document tree in the media

The box model

Basic Box Model: When a browser renders a Render tree, the browser’s rendering engine divides all elements into rectangular boxes based on the base box model. The appearance of the boxes is determined by style.

The layout of each box is determined by the following factors:

  • The size of the box
  • Types of boxes: inline boxes (inline), in-line boxes (inline-level), atomic in-line boxes (atomic inline-level), block boxes (block-level)
  • Positioning: normal flow, floating, absolute positioning
  • The child or sibling of the current box in the document tree
  • Viewport (viewport) size and location
  • The size of the picture inside the box
  • Some other external factor

Type of box:

  • Block box

    • When the elementdisplayforBlock, list-item, or tableIs a block-level element
    • Visually presented as blocks, arranged vertically
    • Block-level boxes participate in block formatting context creation
    • Block-level boxes are used to describe their relationships to parent and sibling elements
    • Each block-level element generates at least one block-level box, known as the primary block-level box (principal block-level box). Some elements, like<li>, generate additional boxes to place bullet points, although most elements generate only one main block-level box.

  • Inline box

    • When the elementdisplayforInline, inline-block or inline-tableIs the inline level element
    • Visually it arranges content in multiple rows with other inline elements; Typical elements such as paragraph content, text (which can have multiple formats such as emphasis), or images are inline elements;
    • Inline level elements generate inline level boxes (inline-level boxes), participating in inline formatting context (inline formatting context). Inline boxes that also participate in generating inline formatting context are called inline boxes (inline boxes). alldisplay:inlineThe boxes generated by non-replacement elements of are inline boxes;
    • In-line boxes that do not participate in generating in-line formatting context are called atomic in-line boxes (atomic inline-level boxes). These boxes consist of replaceable inline elements, ordisplayA value ofThe inline - block or inline - tableCan not be divided into multiple boxes;

  • Anonymous boxes are divided into anonymous block boxes and anonymous inline boxes. Because anonymous boxes have no name, they cannot be selected by using a selector, so all their properties are inherit or the initial default values.

The calculation of visual formatting model all depends on the boundary of a rectangle, which is called containing block. Generally, the generated box plays the role of its descendant element containing blocks; We call this: a box builds containment blocks for its descendants. Inclusion blocks are a relative concept.

Positioning scheme:

  • Conventional flowNormal flow
    • In a normal flow, the boxes are arranged one after the other
    • positionforstatic relativeAt the same timefloat:noneWill trigger the regular flow
  • floatingfloat
    • Causes regular flow to surround (unless cleared float)
  • Absolute positioning
    • Absolute positioning causes the box to be removed from the regular flow without affecting the original layout

BFC

The block format context is a separate rendering area that only block-level boxes participate in, dictating how the inner boxes are laid out, and has nothing to do with the outside.

Generating conditions (satisfy one of them) :

  • The root element
  • Floating (floatDon’t fornone)
  • Absolute positioning element (fixed absolute)
  • Inline block elements (inline-block)
  • Table cells (table-cell)
  • Form Title (table-caption)
  • Anonymous table cells
  • overflowDon’t forvisible
  • displayforflow-root
  • The elastic element
  • Grid elements
  • Multiple columns container

The BFC contains all the child elements that created the context element, but not the elements inside the child element that created the new BFC:

The BFC class represents the block format style <div id='div_1' class='BFC'>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>
Copy the code

Div1 creates a block format context that includes div5, but div5 creates a new BFC so div6 and div7 do not belong to the outer BFC, or the same element can only exist in one BFC.

BFC internal rules:

  • The inner boxes will be arranged vertically
  • The inside of themarginoverlap
  • The child elementmargin boxThe left-hand side of theta will sumBFCtheborder boxTo the left
  • The inside elements do not affect the outside and vice versa
  • BFCRegions do not overlap with floats
  • To calculateBFCThe height will contain floating elements

Application:

  • stopmarginoverlap
  • You can include float elements and clear internal floats (there are two principles for clearing floatsdivThey’re all in the same placeBFCIn the region)
  • Adaptive two-column layout
  • Prevents elements from being overwritten by floating elements