what

• A page is made up of boxes, and the type of each box is determined by display
  • Elements with the value block, list-item, table, etc., generate block-level boxes
  • Elements with values of [inline, inline-block, inline-table, etc.] generate inline-level boxes
  • A value of”?The element generates a run-in box
    • Flex or inline-flex => Flex Container
    • Grid or inline-grid => Grid Container
• whileDifferent types ofThe box will be thereDifferent Formatting contextsPress different rules to render

Block Formatting Context (BFC)

what

• Landing is aindependentRender area of,provisionsHow to layout the internal block-level box
• How to create a BFC
• Common as follows:
  • Root element (HTML)
  • Float element (float is not None)
  • Absolute position element (position is absolute or fixed)
  • Overflow computed values are not visible
  • Display inline-block, flex, inline-flex, grid, inline-grid, etc

BFC layout rules

• Boxes inside the BFC are placed vertically, one after the other, from the top of the containing block

• The vertical distance between the two boxes is determined by margin

  • The same landingAdjacent block boxThe vertical directiontheMarign overlap

• The left margin of each box in the BFC is immediately adjacent to the left border of the containing block (for right-to-left formatting, the right margin is immediately adjacent to the right border) — contains floating elements (although the box’s row box may be reduced by the float), unless the box builds a new BFC (in which case, The box itself may be narrowed by floating)

  • Create a new BFC for a box in the BFC, then it does not belong to the original BFC, that is, it is independent, does not affect the outside world

• The float element is also taken into account when calculating the height of the box that creates the BFC

Summary: A BFC is a separate container on a page, isolated from the outside world

Usage scenarios

Floating child elements cause the parent element to collapse highly

• According to the BFC creation rules, the root element (HTML) creates the corresponding BFC, which belongs to the parent element of the.container and the child element of the.box classThe same landingBut since the dot box child isThe floating elementAnd theThe parent elementitselfHeight not specified, so the parent element has no corresponding height (i.eThe height of collapseSituation)

.container {
  border: 5px solid red;
  overflow: hidden;
}

.box {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
Copy the code

<div class="container">
    <div class="box"></div>
</div>
Copy the code

• Solution: Use the [BFC layout rules]The float element is also involved in calculating the height of the box that creates the BFC】
  • The.container element creates the BFC and calculates the height of the.container element. The height of the floating.box element is taken into account, although the height of the.container element is not specified, so height collapse does not occur

.container {
  border: 5px solid red;
  overflow: hidden;
}

.box {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
Copy the code

<div class="container">
    <div class="box"></div>
</div>
Copy the code

Margins overlap vertically between adjacent boxes belonging to the same BFC

• Because the. Box1 element and the. Box2 element belong to the same BFC (the HTML-created BFC), their margins overlap

.box1 {
  width: 100px;
  height: 100px;
  background: blue;
  margin-bottom: 50px;
}
.box2 {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 150px;
}
Copy the code

<div class="box1"></div>
<div class="box2"></div>
Copy the code

• The vertical distance between the two boxes is determined by margin. Same BFCAdjacent block boxThe vertical directiontheMarign will overlap 】,Wrap any element in a BFC parent box
  • In this case, the.box1 element and the.box2 element belong to two different BFCEach otherSo margins don’t overlap

.box1 {
  width: 100px;
  height: 100px;
  background: blue;
  margin-bottom: 50px;
}
.box2-container {
  overflow: hidden;
}
.box2 {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 150px;
}
Copy the code

<div class="box1"></div>
<div class="box2-container">
    <div class="box2"></div>
</div>
Copy the code

Non-floating elements are overwritten by floating elements

• Due to the BFC in each boxLeft marginClose to theContains the left border of the block(Includes float elements)
  • The.box2 element is displayed next to the body element

.box1 {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.box2 {
  width: 100px;
  height: 100px;
  background: red;
}
Copy the code

<div class="box1"></div>
<div class="box2"></div>
Copy the code

• Solution: Create a new BFC for non-floating elements, because the BFC’s rendering area is independent of the outside world (an HTML-created BFC requires that the left border of each box is adjacent to the left border of the containing block, which is unaffected by the outside world), and its layout is unaffected by the outside world
  • That is, floating element energyvisibleElements with literal properties (inline, inline-block, etc.), andCan't seeBlock-level elements

.box1 {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.box2 {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  /* overflow: hidden */
}
Copy the code

<div class="box1"></div>
<div class="box2"></div>
Copy the code

• usingThis feature + The default value of width is 100%To implement theTwo column adaptive layout

.box1 {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.box2 {
  height: 100px;
  background: red;
  /* display: inline-block; * /
  overflow: hidden
}
Copy the code

<div class="box1"></div>
<div class="box2"></div>
Copy the code

The end of the landing

• Everything revolves around the BFC being an isolated one on the pageSeparate container.And the outside world is not affectedThis sentence solves the problem
  • Floating child elements cause the parent element to collapse highly
    • The problem is solved by having the parent of the floating child create a BFC. Since the BFC is independent, the parent element is separated by the floating child element in order not to affect the layout of the outside world.When the BFC calculates the height, it includes the height of the floating element)
  • Margin merges vertically for adjacent boxes belonging to the same BFC
    • Create a BFC for any box so that the two boxes belong to different BFC and do not affect each other, so that there is no vertical margin merge (If it does, it will affect the layout of another BFC!)
  • Non-floating elements are overwritten by floating elements
    • Similarly, if you create a BFC for a non-floating element so that the two belong to different BFC, the external floating element and the box layout inside the new BFC do not affect each other, the new BFC will be narrowed and not covered by the floating element (two-column adaptive layout).

BFC is an independent container that does not affect the outside world.

• The layout of one box inside the BFC does not affect the layout of another box inside the BFC (i.e. elements are not overwritten, margins are not merged, etc.)

Inline Formatting Context (IFC)

• The IFC is created from the box of the inline-level box. It is still a separate rendering area, which also dictates how the boxes inside the IFC are laid out
  • As for IFC, we still need to discuss it around the following things
    • It’s inUnder what conditions will it be created
    • It’sWhat are the layout rules
    • It’sUsage scenarios(Use its features to fulfill requirements)

I will not go into details here, but recommend the IFC of CSS

Flex Formatting Context (FFC)

• A box with a display property value of flex or inline-flex creates FFC, and the internal box is then laid out according to FFC rules (that is, according to flex layout syntax)
• Recommend the article
  • A Complete Guide to Flexbox
  • Understand flex-grow, flex-shrink, and flex-basis in depth

Grid Formatting Context (GFC)

• Similarly: a box with grid or inline-grid as the display attribute creates a GFC, and then the internal box is laid out according to the rules specified by the GFC
• Recommended articles:
  • A Complete Guide to Grid

reference

• Block formatting context -MDN
• Understand the BFC of the CSS at one time
• The principle behind the magic of BFC
• The W3C this