Probably the best BFC analysis...

Probably the best BFC analysis...

Tips: The BUG before the excavation caused the article to be deleted and the comment disappeared. Please reissue it.

The full text is about 3000 words, and it takes about 6 minutes to read it. It s better to eat with examples

BFC
(Block Formatting Contexts), block-level formatting context , is
CSS
A more obscure concept in, let s try to understand it thoroughly in plain and easy-to-understand language.

Box model

CSS
The box model describes the adoption of
Elements in the document tree
And corresponding
Visual formatting model
The generated rectangular box. Simply put, the box model defines a
Rectangular box
, When we need to lay out the document, the browser s rendering engine will represent all elements as rectangular boxes according to the box model. The appearance of the box is determined by
CSS
Decided.

A standard box consists of four parts, from the inside to the outside:

content
,
Padding
,
frame
,
Margin
:

In the standard box model, the size of the content area can be clearly passed

width
,
min-width
,
max-width
,
height
,
min-height
,
max-height
control
, that is, through
CSS
The set element width and height only include the content area . You may have heard of
Weird box model
, This box model was first
IE
Appears in the browser, also called
IE box model
,
box-sizing
Attribute value
border-box
When the element will be rendered
Weird box model
, At this time, the width and height of the element include the content, padding and border .

Visual formatting model

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

The layout of each box is determined by

size
,
Types of
,
Positioning
,
Child element or sibling element of the box
,
The size and position of the viewport
And other factors.

The calculation of the visual formatting model depends on the boundary of a rectangle. The boundary of this rectangle is

Containing block
(containing block), such as:

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

In the above code snippet,

table
with
tr
Are all containing blocks,
table
Yes
tr
Contains blocks while
tr
Again
td
The containing block.

It should be noted that the box is not limited by the containing block. When the layout of the box goes outside the containing block, it is what we call overflow .

The visual formatting model defines the generation of boxes, the boxes mainly include

Block box
,
Inline box
with
Anonymous box
.

Block-level element

CSS
Attribute value
display
for
block
,
list-item
,
table
Elements.

Block box

The block-level box has the following characteristics:

  • CSS
    Attribute value
    display
    for
    block
    ,
    list-item
    ,
    table
    When it is a block-level element
  • Visually, block-level boxes appear as vertically arranged blocks
  • Every block-level box will participate
    BFC
    The creation of
  • Each block-level element will generate at least one block-level box, called the main block-level box; some elements may generate additional block-level boxes, such as
    <li>
    , Used to store bullets

Inline element

CSS
Attribute value
display
for
inline
,
inline-block
,
inline-table
Elements.

Inline box

The inline box has the following characteristics:

  • CSS
    Attribute value
    display
    for
    inline
    ,
    inline-block
    ,
    inline-table
    , It is the inline element
  • Visually, inline boxes and other inline level elements are arranged in multiple lines
  • All replaceable elements (
    display
    Value is
    inline
    ,Such as
    <img>
    ,
    <iframe>
    ,
    <video>
    ,
    <embed>
    Etc.) The generated boxes are all inline boxes, they will participate
    IFC (inline formatting context)
    The creation of
  • All non-replaceable inline elements (
    display
    Value is
    inline-block
    or
    inline-table
    ) The generated box is called the atomic intra-row box and does not participate
    IFC
    create

Anonymous box

Anonymous box means that cannot be

CSS
The box selected by the selector, such as:

< div > Anonymous Box 1 < p > Block box </p > Anonymous Box 2 </div > copy code

In the above code snippet,

div
Element and
p
The elements will generate a block-level box,
p
Two anonymous boxes are generated before and after the element.

Anonymous box all inheritable

CSS
The attribute values are
inherit
, All non-inheritable
CSS
The attribute values are
initial
.

Positioning plan

CSS
Page layout technology allows us to pick up elements in a web page and control their position relative to the normal layout flow (normal flow), surrounding elements, parent container, or main viewport/window. From a macro perspective, the technical layout is affected by the positioning plan. The positioning plan includes
Normal flow
(Normal Flow, also called regular flow, normal layout flow),
float
(Float),
Positioning Technology
(Position).

Normal flow

Browser default

HTML
Layout mode. At this time, the browser does not do any layout control of the page.

when

position
for
static
or
relative
,and
float
for
none
The normal stream will be triggered at time, and the normal stream has the following characteristics:

  • In normal flow, all boxes are arranged one after another
  • BFC
    , The boxes will be arranged vertically
  • IFC
    In the middle, the boxes will be arranged sideways
  • Statically positioning (
    position
    for
    static
    ), the position of the box is the position of the layout in the ordinary stream
  • Relative positioning (
    position
    for
    relative
    ), the offset position of the box is determined by
    top
    ,
    right
    ,
    bottom
    ,
    left
    Definition, even if there is an offset, the original position is still retained, and other ordinary streams cannot occupy this position

float

  • In floating positioning, the box is called floating box (Floating Box)
  • The box is at the beginning or end of the current line
  • Normal flow will surround the floating box, unless set
    clear
    Attributes

Positioning Technology

Positioning technology allows us to accurately move an element from its original position on the page to another position. There are four types:

Static positioning
,
Relative positioning
,
Absolute positioning
,
Fixed positioning
.

Static positioning

The default positioning method (

position
for
static
), when the element is at
Normal flow
in.

Relative positioning

Relative positioning is usually used to fine-tune the layout,

position
for
relative
When the element uses relative positioning, you can pass
top
,
right
,
bottom
,
left
The attribute fine-tunes the position of the element and sets its offset relative to itself .

Absolute positioning

In the absolute positioning scheme, the box will be removed from the ordinary stream and will not affect the layout of other ordinary streams. Absolute positioning has the following characteristics:

  • Element attributes
    position
    for
    absolute
    or
    fixed
    When it is absolutely positioned element
  • Its positioning relative to its containing block can be passed
    top
    ,
    right
    ,
    bottom
    ,
    left
    The attribute fine-tunes the position of the element, setting its offset relative to the containing block
  • position
    for
    absolute
    Element, its positioning will be relative to the nearest one
    relative
    ,
    fixed
    or
    absolute
    The parent element, if not, relative to
    body

Fixed positioning

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

Block-level formatting context

By right

CSS
Knowledge of box model, positioning, layout, etc., we know
BFC
This concept actually comes from
Visual formatting model
,

It is the page

CSS
A part of the visual rendering that is used to determine the layout of the block-level box and an area of the floating mutual influence range .

Creation of BFC

The following elements will create

BFC
:

  • Root element (
    <html>
    )
  • Floating element (
    float
    Not for
    none
    )
  • Absolutely positioned elements (
    position
    for
    absolute
    or
    fixed
    )
  • Table headings and cells (
    display
    for
    table-caption
    ,
    table-cell
    )
  • Anonymous table cell element (
    display
    for
    table
    or
    inline-table
    )
  • Inline block element (
    display
    for
    inline-block
    )
  • overflow
    Is not
    visible
    Elements
  • Elastic element (
    display
    for
    flex
    or
    inline-flex
    Direct children of the element)
  • Grid element (
    display
    for
    grid
    or
    inline-grid
    Direct children of the element)

Above are

CSS2.1
Specification defined
BFC
Trigger method, in the latest
CSS3
In the specification, elastic elements and grid elements will be created
F(Flex)FC
with
G(Grid)FC
.

Scope of BFC

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 translated,

BFC
Contains all child elements of the element that created it, but does not include the creation of a new
BFC
The inner element of the child element.

Simply put, if the child element creates a new

BFC
, Then the content in it does not belong to the previous one
BFC
, This reflects
BFC
isolationThe idea of , we still use
table
For example:

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

Hypothesis

table
Element created
BFC
We mark as
BFC_table
,
tr
Element created
BFC
Denoted as
BFC_tr
, According to the rules, two
BFC
The ranges are:

  • BFC_tr
    :
    td
    element
  • BFC_table
    :only
    tr
    Elements, not including
    tr
    inner
    td
    element

In other words, an element cannot exist in two BFCs at the same time .

Characteristics of BFC

BFC
In addition to creating an isolated space, it also has the following characteristics,
The link address of the CodePen example is attached, which can be understood with the example
:

  • BFC
    Block-level inside the cartridge are arranged one after the other in the vertical direction
  • the same one
    BFC
    The next adjacent block-level elements may collapse margins, create a new
    BFC
    Avoidable margin folding
  • The left side of the margin box of each element is in contact with the left side of the border box containing the block (formatting from right to left, the opposite is true), even if there is a float
  • The area of the floating box will not be
    BFC
    Overlap
  • Calculation
    BFC
    When the height of, the floating element will also participate in the calculation

Application of BFC

Adaptive multi-column layout

use

Characteristics
with
Features
, The middle column is created
BFC
, The left and right columns float after the width is fixed. Since the left side of the margin box of the box touches the left side of the border box containing the block, the area of the floating box will not be in contact with
BFC
Overlap, so the width of the middle column will be adaptive, example .

Prevent folding of margins

use

Characteristics
To create a new
BFC
, So that adjacent block-level boxes are located in different
BFC
Bottom can prevent the margins from folding, example .

Clear float

use

Features
,
BFC
The internal floating elements will also participate in the height calculation and can be cleared
BFC
Internal float, example .

Write at the end

This article first appeared on my blog , ignorant, it is inevitable error, the article also has a wrong way to look at hesitate to correct me!

If you have any questions or find errors, you can ask questions and make corrections in the comment area.

If you like or have some inspiration, star is welcome, which is also an encouragement to the author.

(Finish)