what is BFC?

What is BFC?

BFC (Block Format Context) refers to the formatting context of a block-level element. It defines how elements are laid out and interact with each other within a block structure.

The characteristic of the BFC

In web design and front-end development, BFC has the following characteristics and effects:

1. In the vertical direction: it is arranged from top to bottom, which is consistent with the arrangement method of the document flow.

2. In the BFC, the margins of two adjacent containers up and down will overlap.

3. The floating elements will be calculated for height by the parent.

4. The area that forms the BFC will not overlap with the floating elements.

The method to generate BFC

1. Floating Elements: the value of the Floating Elements is not None;

2. Position Elements: the value of the Position Elements is absolute or fixed;

3. Flexible Elements: the value of the Flexible Elements is flex or inline-flex;

4. Overflow Elements: the value of the Overflow Elements is not visible;

The role of BFC

1. solve the overlapping problem of margin: the BFC is an independent area, and the internal elements and the external elements don't affect each other, turning two elements into BFC elements after, the overlapping problem is solved;

2. solve the collapse problem of margin: set overflow: hidden
   for the parent element;

3. solve the problem of height collapse: when the children are set floating attribute, the parent element will have a height collapse problem, that is, the height of the parent element will become 0. if you want to solve the problem, you should turn the parent elements into a BFC. The common method is to set overflow: hidden for the parent element.