Detailed explanation of BFC mode

This time I will bring you a detailed explanation of the BFC mode. What are the precautions when using the BFC mode. The following is a practical case, let’s take a look.

Detailed explanation of BFC【block formatting context】

You may not think that BFC is a common thing, but you You will definitely use it frequently, maybe you didn’t think of BFC when you used it. So what exactly is it? Let’s take a look.

The official BFC explanation is this, floating elements and absolutely positioned elements, block-level containers of non-block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes with an overflow value other than "visiable" will create new block-level formatting contexts for their contents.

In a block-level formatting context, boxes are arranged vertically one after another starting from the top of the containing block. The vertical gap between two boxes is determined by their margin value. The vertical margins of two adjacent block-level boxes overlap.

In a block-level formatting context, the left outer edge of each box (margin-left) will touch the left edge (border-left) of the container (for right to For left formatting, it touches the right edge), even if there is a float, unless the box creates a new block-level formatting context.

The above mentioned repeatedly "block formatting context", obviously BFC is their abbreviation, the official also has "inline formatting context", that means"formatting context"We need to take a closer look at what it means, so let's break it down and take a look:

formatting: n, the meaning of formatting, v, To format (the present participle of format); to specify the format (or shape, size, proportion, etc.) of...;
context: context; context; background; environment;

Put together, it means "formatting context". It is a rendering area in the page and has a set of rendering rules, which determines how its sub-elements will be positioned, as well as their relationship and interaction with other elements.

The most common Formatting contexts are Block fomatting context (BFC for short) and Inline formatting context (IFC for short). There are only BFC and IFC in CSS2.1, and GFC and FFC are also added in CSS3.

Box is also an important concept. Box is the object and basic unit of CSS layout. From a visual point of view, it is a page. It is composed of many Boxes. The type of element and display attribute determine the type of this Box. Different types of Box will participate in different Formatting context (a container that determines how to render the document), so the elements within the Box will be rendered in different ways.

For example, if the display attribute value is block, list-item, or table, a block-level box will be generated. And participate in block fomatting context. inline-level box: Elements whose display attributes are inline, inline-block, and inline-table will generate an inline-level box. and participate in inline formatting context.

So let’s understand it in a layman’s terms, BFC means “block-level formatting context”. The element that creates the BFC is an independent box, but only the Block-level box can participate in creating the BFC. It stipulates How the internal Block-level Box is laid out, and the layout in this independent box is not affected by the outside. Of course, it will not affect the outside elements.

So let’s take a look at some features of BFC boxes:

1. The internal Boxes will be placed one after another in the vertical direction, starting from the top.
2. The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
3. The left side of the margin box of each element is in contact with the left side of the containing block border box (for left-to-right formatting, otherwise the opposite is true). This is true even if there is float.
4. The BFC area will not overlap with the float box.
5. BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the outside elements, and vice versa.
6. When calculating the height of BFC, floating elements also participate in the calculation.

In which scenarios BFC can be used

1. Solve the problem of margin overlay

When the boxes are arranged up and down, the upper box margin-bottom:50px; the lower box margin-top:50; then something magical happens , if the two boxes are calculated according to superposition, the distance should be 100px, but we found that the two margin values ​​are actually superimposed, leaving only 50px. Then at this time we can trigger the BFC mode and add a parent to one of the boxes. Level element;

2. Used for layout

The left margin of the element will touch the outer border of the containing block container, even if there is a float, then we can Use this method to create a two-column layout, with the first box floating and the second box margin-left assigned;

3. Used toclear the float and calculate the BFC height

We found that due to the floating relationship between the two child elements inside, the two boxes have separated from the containing block of the parent element, and the height of the parent element has collapsed. We need to make the parent element contain two boxes. Child elements, when calculating the height, two floating child elements will participate, so we need to close the float and trigger the BFC of the parent element, such as overflow:hidden;

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!
Recommended reading:

How to use attribute value inheritance in css

css to create dotting effects

CSS3 attributes transition, animation, transform

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