Writing in the front

I have always felt that BFC is dimly discernible and difficult to understand. Recently, I focused on learning about it and gained something, so I recorded it.

What is landing

define

Block formatting context (BFC) : block formatting context.

Constraint object

All block-level elements within the BFC

Details:

  1. A block-level element occupies the entire row space
  2. Vertical direction from top to bottom
  3. The vertical spacing between elements is determined bymarginDetermines the verticality of adjacent block-level elementsmarginThere will be folds.
  4. To calculateBFCThe float element is also calculated when the height of
  5. BFCThe block-level element edge will not go beyondBFCBoundaries, unless the element itself becomes a new oneBFC.

How do you use the landing

How to create a BFC

  1. The HTML root element is created by defaultBFC
  2. float: left / right
  3. position: relative / absolute / fixed
  4. overflow: hidden / auto / scroll
  5. display: inline-block / flex / inline-flex

Scenarios using BFC

Remove the floating

If the parent element has floating children that cause the height to collapse, you can add overflow: hidden to the child element, so that the outer element can wrap the child element, because overflow: hidden creates a BFC that does not allow children to go beyond their boundaries.

Margin Fold the margin

If the parent block level element has no border or padding, the margins will collapse. Setting the BFC for the parent prevents the parent element margin from collapsing.

The child element exceeds the parent element

This scenario is very common, use position: Absolute and other ways to achieve the offset layout UI design.