Block-level formatting context

The BFC is an independent layout environment in which the layout of elements is not influenced by the outside world.

It determines how a block-level element lays out its content and how it relates to and interacts with other elements.

Block-level elements: parent (which is a block element) Content: Child (which is a block element) Other elements: Interaction with sibling elements at the same level as content: Elements in the BFC do not affect outside elementsCopy the code

How to trigger BFC:

  1. The value of float is not None.
  2. The value of position is not static or relative.
  3. The display value is inline-block, table-cell, flex, table-caption, or inline-flex.
  4. The overflow value is not visible.

Functions of BFC:

  1. Adaptive two-column layout;
  2. Prevent sibling elements from being overwritten by floating elements;
  3. Block margin overlap (you can block the margin overlap of two divs by placing a div outside the div and triggering the BFC of the outside div);
  4. Contains float elements to clear internal floats;

Differences between a BFC layout and a normal document flow layout:

Normal document flow layout rule 1. Floating elements are not height computed by the parent 2. The non-floating element overwrites the floating element position 3. Margin is passed to parent 4. Margin of two adjacent elements overlaps BFC layout rules 1. Floating elements are height calculated by their parent (parent triggers BFC) 2. Non-floating elements do not overwrite floating element positions (non-floating elements trigger BFC) 3. Margin is not passed to the parent (parent triggers BFC) 4. Margin does not overlap between two adjacent elements (add a parent to one of the elements and have the parent trigger the BFC)Copy the code

Extension: IFC (Inline Formatting Context)