Understanding BFC (block-level visual context) in CSS [Translation]_html/css_WEB-ITnose

Opening

Some elements, such as float elements, elements whose position is absolute, inline-block, table-cell or table-caption, and elements whose overflow attribute is not visible, will create a New block-level formatting context.

The above definition has described in detail how the block formatting context (Block Formatting Context) is formed. For the sake of convenience, BFC is used instead in this article. Now, let us redefine it in a simple way:
BFC is also a box in HTML (just invisible). A BFC can only be formed if at least one of the following conditions is met:

The float attribute is not none.

The position attribute is not static and relative.

The display attribute is one of the following: table-cell ,table-caption,inline-block,flex,or inline-flex.

overflow attribute is not visible.

Let’s build a BFC

HTML code As follows:

<div class="container">  Some Content here</div>

We can use CSS to attach the above conditions to the container, such as overflow: scroll, overflow: hidden, display: flex, float: left, or display: table. Although these conditions can all be formed A BFC, but each of them has different performance:

display: table: There will be problems in responsive layout

overflow: scroll: There may be scroll bars you don’t want

float: left: Make the element float left, and other elements wrap around it

overflow: hidden: Eliminate the overflow part

It seems that the best way to build BFC is overflow:hidden:

.container { overflow: hidden; }

What about block-level elements in BFC? What about the layout?

The W3C specification describes it as follows:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).bfcbfc. jpg

To put it simply: all boxes belonging to BFC in the above picture are left aligned by default, and their left margin can touch the left side of the container. The last box, although it is floating, still follows this principle. (Floating in BFC will be introduced below)

- So, what is the use of BFC?

-In fact, it is really useful

1. Use BFC to eliminate Margin Collapse

Under normal circumstances, all boxes in a container will be Arranged vertically from bottom to top, that is, what we say is that one element occupies one line, and the vertically adjacent distance (i.e., margin) is determined by the respective margins, not the superposition of two margins.

Let’s look at an example: a red div contains three green p elements.

HTML code:

<div class="container">  <p>Sibling 1</p>  <p>Sibling 2</p>  <p>Sibling 3</p></div>

CSS code:

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { background-color: lightgreen; margin: 10px 0; }

Ideally, we would think that the margin between p tags should be their sum (20px ), but it is actually 10px. This is actually collapsing margins.

The results are as follows:

This seems a bit confusing, BFC caused margin collapse, and now it is used to solve margin collapse. But always remember One point: Only when the elements are in the same BFC, the margin
in the vertical direction will clollpase. If they belong to different BFCs, there will be no margin collapse. So we can build another BFC to prevent margin collpase occur.

Now the HTML becomes:

<div class="container">  <p>Sibling 1</p>  <p>Sibling 2</p>  <div class="newBFC">    <p>Sibling 3</p>  </div></div>

The CSS has also changed:

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { margin: 10px 0; background-color: lightgreen; }.newBFC { overflow: hidden; /* creates new block formatting context */ }

The current result is:

Since the second p element and the third p element belong to different BFCs, margin collapse is avoided.

2. Use BFC to accommodate floating elements

I believe you often encounter floating elements in a container , but the height of this container is 0, as shown below:

Look at the example below:

HTML:

<div class="container">  <div>Sibling</div>  <div>Sibling</div></div>  

CSS:

.container { background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }

Result:

In the above case, the container will not have a height because it contains floating elements. Usually our solution to this problem is to use a pseudo element to implement clear fix, but now we have a better solution, which is to use BFC, because it can accommodate floating elements.
We now let the container form BFC rules, and the results are as follows:

.container { overflow: hidden; /* creates block formatting context */ background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }

Results:

3. Use BFC to prevent text from wrapping

Sometimes, to be exact In most cases (without special settings), the text will wrap around the floating element (such as Figure 1),
But sometimes this is not what we expect, and what we want is Figure2.

Often everyone may choose to use margin-left to force the p container to have a left margin, and the distance is exactly the width of the Floated div, but now we can use BFC to better Solve this problem.

First, let us understand the principle of text wrapping:

In Figure 1, the entire p element is actually in the black area in the picture above. The p element does not move because it is below the floating element. But in fact, p, as a line block level element (relative to the inline text), has moved because the float element needs to be 'vacated'. As the text increases, the part of the text whose height exceeds the floating element will not be horizontal. Shrinks the inner distance in the direction so it appears to wrap around.

As shown:

Before solving this problem, let’s take a look at the description of the W3C specification in this regard:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

W3C provides a solution for this situation: unless the box establishes a new block formatting context, that is, establishing a BFC for p.

Result:

Note: This article is a translation
Please click on the blog
Please click on the original article