About BFC


What is BFC?

BFC (block formatting context) is a block level formatting context. It is an independent rendering area that specifies how the internal boxes are laid out and will not be affected by the outside world. In a BFC, row boxes and block boxes are arranged along the parent element border.

How to form BFC

  • The value of float is not none.
  • The value of position is not static or relative.
  • The value of display is inline block, table cell, flex, table caption, or inline flex
  • The value of overflow is not visible

BFC rules

  • The inner boxes will be placed vertically, one by one.
  • The vertical distance of the box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
  • The left side of the margin box of each box (block box and row box) contacts the left side of the containing block border box (for formatting from left to right, otherwise the opposite). Even if there is a float.
  • The area of the BFC does not overlap the float box.
  • BFC is an isolated independent container on the page. The child elements in the container will not affect the external elements. And vice versa.
  • When calculating the height of BFC, floating elements also participate in the calculation.