1. The meaning of BFC:

Block Formatting Contexts (BFC) block-level element formatting contexts

It determines how a block-level element lays out its content, as well as its relationship to and interrelationships with other elements

block-level element: parent (is a block element)

content: child element (is a block element)

Other elements: sibling elements at the same level as the content

Interaction: elements in the BFC will not affect the elements outside

2. Trigger condition:

The way to trigger BFC (click any one)

1. The value of float is not none

2. The value of overflow is not visible

3. The value of display is one of table-cell, tabble-caption and inline-block

4. The value of position is not static or any of relative

3. The difference between FBC layout and ordinary document flow layout

Normal document flow layout rules

1. Floating elements are not calculated by their parent height

2. Non-floating elements will override the position of floating elements

3.margin will be passed to the parent

4. The upper and lower margins of two adjacent elements will overlap

BFC layout rules

1. Floating elements will be calculated height by the parent (the parent triggers the BFC)

2. Non-floating elements will not cover the floating element position (non-floating elements trigger BFC)

3.margin is not passed to the parent (the parent triggers the BFC)

4. The upper and lower margins of two adjacent elements will overlap (add a parent to one of the elements, and then let his parent trigger BFC