Detailed explanation of important BFC in CSS

In this article, we mainly share with you a detailed explanation of the important BFC in CSS. There is an important concept BFC in CSS. Understanding BFC can help us understand some of the originally weird (??) places in CSS.

1. Introduction

Before explaining BFC, let’s talk about document flow. The document streams we often talk about are actually divided into three types: Positioned stream , Floating stream , and Ordinary stream . The ordinary flow actually refers to the FC in BFC. FC (Formatting Context), literally translated as formatting context, is a rendering area in the page. It has a set of rendering rules that determine how its sub-elements are laid out and their relationship and role with other elements. Common FCs include BFC, IFC, GFC and FFC.

BFC(Block Formatting Context) Block-level formatting context is a rendering area used to layout block-level boxes, or a rendering rule under certain conditions.

Explanation on MDN: BFC is the visual CSS rendering part of the Web page. It is the area where block-level box layout occurs, and it is also the area where floating elements interact with other elements.

2. BFC triggering method

1. Root element, that is, HTML tag

2. The value of float is not none, it is left, right

3. ##overflow value is not visible, it is

   auto, scroll,hidden

4. display values ​​are

   inline-block, table-cell, table-caption ,flex,inline-flex,grid,inline-grid

5. position value For

   absolute, fixed

Note: display:table can also generate BFC because Table will be generated by default An anonymous table-cell, it is this anonymous table-ccell that generates BFC.

3. Constraint rules

The browser’s constraint rules for the BFC area:

1. The child elements of the generated BFC element will be placed one after another. Their starting point in the vertical direction is the top of a containing block, and the vertical distance between two adjacent child elements depends on the element's margin property. In BFC, the margins of adjacent block-level elements will be collapsed (Mastering margin collapsing).

2. In the child elements of the generated BFC element, the left margin of each child element touches the left border of the containing block (for right-to-left formatting, the right margin touches the right border), even if the element is floated (although the content area of ​​the child element will be compressed due to floating), unless the child element also creates a new BFC (such as it is itself a floated element).

Rule interpretation:

1. The internal Boxes will be placed one after another in the vertical direction

2. The vertical distance of the internal Box is determined by margin. (The complete statement is: the margins of two adjacent boxes belonging to the same BFC will be folded, but different BFCs will not be folded.)

3. The left margin of each element is the same as The left edges of the containing blocks touch (from left to right), even for floated elements. (This shows that the sub-element in BFC will not exceed its containing block, while the element with absolute position can exceed the boundary of its containing block)

4. The area of ​​​​BFC will not overlap with the float element Area overlap

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

4. Function

BFC is the page An isolated independent container on the container, the child elements inside the container will not affect the outer elements, and vice versa. We can use this feature of BFC to do many things.

4.1 Prevent elements from being covered by floating elements

A block element in the normal document flow may be covered by a float element, occupying the normal document flow, so you can set the float, display, and position values ​​​​of an element Trigger BFC in other ways to prevent being covered by floating boxes.

View DEMO

4.2 Floating elements can be included

By changing the attribute value of the parent box containing the floating child element, BFC is triggered to contain the floating box of the child element.

View DEMO

4.3 Prevent the merging of margins of adjacent elements

The upper and lower margins of two adjacent block-level sub-elements belonging to the same BFC will overlap (set writing-mode :tb-rl, horizontal margins will overlap). Therefore, margin overlap can be prevented when two adjacent block-level child elements belong to different BFCs.

Here, wrap a p around the outside of any adjacent block-level box, and change the attributes of this p to make the two original boxes belong to two different BFCs to prevent margin overlap.

View DEMO

But here is a question: If it is wrapped with a layer of p, setting any attribute that can trigger BFC can prevent adjacent elements from being Margins merge. Because they belong to different BFCs, margin merging will not occur.
If you do not include a p outside, setting display to inline-block, inline-flex, table-captain, position to absolute, fixed, and float to left or right can prevent margin merging. Here comes the question:

We know that setting position and float will make the element break away from the document flow and create a new BFC, so the two elements are not adjacent elements, so it can prevent the margins of adjacent elements from merging, but inline-block and inline-flex , inline-grid, table-captain why? If anyone knows why, please let me know~

Related recommendations:

BFC hidden in CSS

What is BFC? A simple understanding of bfc

The definition of floating and the clearing of floating (BFC)

The above is the detailed content of Detailed explanation of important BFC in CSS. For more information, please follow other related articles on the PHP Chinese website!