About the important BFC in CSS

This article we mainly share with you about the important BFC in CSS, CSS has an important concept BFC, understand BFC can let us understand some of the original CSS in the strange (??) The place.

1. Introduction

Before explaining BFC, let's talk about the flow of documents. We often say that the document flow is divided into positioning flow , floating flow , the normal flow of three. And the ordinary flow is actually refers to the FC in BFC. FC (formatting context), literal translation comes from a format context, which is a rendering area of a page, a set of rendering rules that determines how its child elements are laid out, and the relationships and effects with other elements. Common FC has BFC, IFC, as well as GFC and FFC.

BFC Block-level formatting context, which is a piece of render area for layout block-level boxes, or a rendering rule under certain conditions (formatting).

Explanation on MDN: BFC is the part of the visual CSS rendering of Web pages, the area where block-level box layouts occur, and the areas where floating elements interact with other elements.

2. BFC Trigger Mode

1. root element, or HTML tag

2. The value of float is not none, leftright

3. Overflow values are not visible, for auto , scroll ,hidden

4. Display values are,,,,,,, inline-block table-cell table-caption flex inline-flex gridinline-grid

5. Position value is absolute ,fixed

Note:display:table can also generate BFC because table will generate an anonymous Table-cell by default, and this anonymous Table-ccell generates BFC.

3. Constraint rules

Browser constraint rules for the BFC zone:

1. The child elements that generate the BFC element are placed one after the other. Vertically their starting point is the top of a containing block, and the vertical distance between the two adjacent child elements depends on the margin characteristics of the element. The margins of adjacent block-level elements in BFC are collapsed (mastering margin collapsing).

2. In a child element that generates a BFC element, each child element's left margin touches the left edge of the containing block (for right-to-left formatting, right margin touches the right edge), even if the floating element is the same (although the content area of the child element is compressed due to a float), Unless this child element also creates a new BFC (as it itself is also a floating element).

Interpretation of rules:

1. The inside box will be placed one by one in the vertical direction.

2. The distance from the inside box vertically is determined by margin. (The complete argument is that the margin of two adjacent boxes belonging to the same BFC will collapse, and the different BFC will not collapse.) ）

3. The left margin of each element touches the left edge of the containing block (left to right), even if it is a floating element. (This indicates that the BFC neutron element does not exceed his containing block, and that the element position to absolute can exceed the bounds of his containing block)

4. BFC area does not overlap with float's element area

5. When calculating the height of the BFC, floating child elements are also involved in the calculation

4. Role

BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements and vice versa. We can use this feature of BFC to do a lot of things.

4.1 Block elements are covered by floating elements

A block element of a normal document flow may be overwritten by a float element, crowding out the normal flow of the document, so you can set the float, display, position value of an element to trigger BFC to prevent it from being overwritten by a floating box.
View Demo

4.2 can contain floating elements

A floating box containing child elements is triggered by altering the property values of the parent box that contains the floating child elements, triggering BFC.
View Demo

4.3 prevent margin merging of adjacent elements

The upper and lower margin of the two adjacent block-level child elements belonging to the same BFC overlap, (The horizontal margin overlaps when the writing-mode:tb-rl is set). Therefore, margin overlap can be prevented when two adjacent block-level sub-elements belong to different BFC.
This gives the outer package of any adjacent block-level box A p, which prevents margin overlap by changing the properties of this p to make two original boxes belong to two different BFC.

View Demo

But here's a question:
If you wrap a layer of p outside, setting any property that triggers BFC can prevent the margin merging of adjacent elements. A margin merger does not occur because of the different BFC.
And if you don't pack a p outside, when you set display to Inline-block, Inline-flex, Table-captain, and position to absolute, fixed,float to left, Right can prevent margin merging. Here's the question:

We know that setting position and float will leave the element out of the document flow and create a new BFC, so the two elements are not adjacent elements, so you can prevent the adjacent elements margin from merging, but Inline-block, Inline-flex, Inline-grid, Table-captain Why can it? If someone knows why, please tell ~