Write in front: the BFC has been chewed for a long time now finally has an account, there are many family views in the article, and can see most of the BFC articles have some different places. I may be wrong, but I’ve really thought about it.

I. What is BFC?

BFC stands for Block Formatting Context.

A formatting context is an environment in which an element has a set of layout rules that determine how it is positioned and interacts with other elements.

BFC is a formatting context that lays out child elements according to block layout rules. Similar concepts include inline formatting context (IFC), flexible formatting context (FFC), and grid formatting context (GFC).

The BFC is a separate render area, and its rules apply only to the child elements within the BFC, i.e. the BFC is like a boundary and does not affect elements outside its own environment.

How to create a BFC?

  • The root element
  • The floating element: the element offloatValues are not fornone
  • Absolute location element: the element ofpositionA value ofabsoluteorfixed
  • The display value of the element is inline-block, table-cell, or table-caption
  • Elements of theoverflowThe value of thevisible

Note that the BFC refers to a context created by the above qualifying element, not the element itself.

3. BFC features and rules

  1. One of the most important features of a BFC is its ability to isolate the internal elements from the external elements so that the internal elements have no effect on the external elements regardless of how they act.

  2. According to the MDN specification, a BFC includes everything inside the element that created it.

    A BFC contains everything inside it, float and clear only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context.

    The BFC includes everything inside the element that created it, float and clear float only apply to items that are in the same formatting context, and margin collapse only occurs in elements that are in the same formatting context.

  3. In the BFC, boxes are arranged vertically, one after the other. This makes sense because the BFC lays out the child elements according to block layout rules.

  4. Two adjacent block-level boxes in the same BFC in the vertical directionmarginThe value causes the margin to collapse.

  5. The outer left edge of each box in the BFC directly touches the left edge of the element box that created the BFC (the opposite is true for formatting from right to left). Notice that the outer left edge of the child touches the left edge of the parent, and for the child box, the outer left edge is the edge of the margin layer.

Iv. Application of BFC

1. Clear floats

In the case of a standard flow layout, the height of the parent element is spread out by the height of the quilt element even if it is not declared. When using floating layout, the height of the parent element will collapse due to the off-scaling feature of floating elements.

To clean up the effects of floating child elements on the parent and the elements that follow, you can create a BFC with the parent element.

Because the BFC includes everything inside the element that created it, the height of the BFC outer box will also include the height of the floating element.

See Part 2 for how to create a BFC. A common approach is to add overflow: Hidden to the parent element.

2. Solve the problem of margin collapse

You can create a new BFC for any box. After generating a separate render area, the margin value of the box will not be affected by the outside world, so that the margin will not collapse.

Five. Some questions

Many articles on the Internet say that the BFC contains all the child elements that create the context element, but not the inner element that creates the child element of the new BFC. However, I did not find this specification in the MDN documentation. The MDN specification only states that A BFC contains everything inside it.

But there is a question: if a new BFC is created in a BFC, do the elements in the new BFC and the elements in the original BFC still belong to the same BFC?

The first thing to remember is that the BFC is designed to calculate the height of elements, and the BFC is a separate render area, with no external influence on its internal layout.

My personal understanding of this is that the new BFC is still part of the original BFC, but the new BFC is like a black box to the original BFC, which means “I know you belong to me, but I don’t care what you’re doing inside”.

That would explain why the height of the landing, including floating element (landing) (many believe that this is one of the rules of landing the article, but I think it is the result rather than reasons), because the floating element is still part of the original landing, calculating the height can’t drop it, like the landscape of the motherland can not fall in any of the autonomous region.

It can also explain why margin collapse can be solved by creating new BFC, not because they do not belong to the same BFC, but because the new BFC transforms into a black box state for the original BFC, and the original BFC no longer cares about the interior of the new BFC, but only cares about the height of the new BFC.

\