Block Formatting Context, or BFC, defines the layout rules of normal flow Block boxes in the region.

The following elements create a BFC region within the BFC

  • The root element:This means that the < HTML > element creates a BFC area that covers all the elements in the page.
  • Float and position elements:Float is left or right.The value of position is absolute or fixed
  • Overflow does not equal visible block boxes:Overflow values are mostly hidden and have little impact on other values
  • The display value is inline-block, table-cell, and table-caption

Internal rules for the same BFC (features of regular flow block boxes)

  • The conventional flow block box must be filled with containing blocks horizontally.
  • Conventional flow block boxes are arranged in the vertical direction of the containing blocks.
  • If the margins of conventional flow block boxes are seamlessly adjacent, the margins are merged.
  • Automatic height and placement of regular flow block boxes, regardless of floating elements.

Rules between different BFC

  • The region of the BFC does not overlap the element region of the external float;
  • A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. The outside elements do not affect the inside of the container;
  • Different BFC areas, which render without interfering with each other, create the elements of the BFC and isolate the connection between its interior and exterior. The interior rendering does not affect the exterior.

According to the rules above, triggering a new BFC formation can lead to several application scenarios

  1. Fixed height collapse caused by floats (clear floats)
  2. Can be used for layout, such as two-column layout, left width fixed, right width adaptive auto
  3. Margin collapse has been resolved

conclusion

The block formatting context is important for both locating floats and clearing floats. Float location and clear float are only applied to elements in the same BFC. Floats do not affect the layout of elements in other BFC, and clearing floats only clears floats of elements before it in the same BFC. Margin collapsing also occurs only between block-level elements that belong to the same BFC.