What is BFC?

BFC is short for Block Formatting Contexts. Let’s take a look at MDN’s definition of it

The BFC is part of the visual CSS rendering of a Web page, the area where the layout process of a block box takes place, and where floating elements interact with other elements

A look at this definition, this is too abstract, read or a face meng have?

Let’s roll out some code to get rid of the mess

<div class="outer">
  <div class="inner">I'm an internal element</div>I'm a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I am a piece of writing, I'm a text, I'm a text, I'm a text, I'm a text, I'm a text, I'm a text, I'm a text, I'm a text</div>
<style>
.outer {
    width: 500px;
    border: 5px solid red;
    padding: 10px;
 }
 .inner {
    background-color: pink;
    border: 3px solid blue;
    color: white;
    float: left;
    width: 300px;
   	height: 200px;
  }
</style>
Copy the code

The effect is this

Then leave one line of text and delete all the other text, and it looks like this

The inner element is outside the scope of the parent element, why? The height of the parent element is now the height occupied by the text content plus the height of the padding and border. How do you solve this problem? At first impression, this is caused by the float, so I should clear the float clear:both, so there seems to be no way to add the clear float without adding any tags. To take advantage of CSS pseudo-elements, add the following code

.outer::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}
Copy the code

Using the CSS above, you add an element and then add a cleanup float. Although this will achieve the desired effect, it feels a little cumbersome, after all, there are so many lines to write, how can this increase productivity. Ok, so now we’re just going to do our big kill thing, we’re just going to add a line inside.outer, overflow:hidden or overflow: Scroll or whatever, as long as the value of overflow is not visible, you can use whichever one you want, whichever one you’re familiar with. The effect is as follows

Here we have to ask again why? This solution is our topic for today, the BFC, and when we set Overflow: Hidden, we actually created a BFC. The entire parent element acts as a BFC, i.e. a separate render area. The parent element in the render area naturally contains all the child elements, so the parent element also contains floating elements.

I remember when I was writing CSS, I was experimenting, and when I understood the principles, it was easy.

Create the landing

In the example above we achieved the desired result by creating a new BFC. What are the ways to create a BFC? Let’s take a look at the official words first

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Here are four general meanings in Chinese:

  • Floats float
  • Absolutely positioned elementsposition:absoulte
  • It’s block containers but not block boxesinline-blocks.table-cells.table-captionsEtc.
  • overflownotvisible

So our example above uses rule 4 to create a new BFC.

BFC layout rules

As for the LAYOUT rules of THE BFC, I will first introduce the W3C CSS2 language

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

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).

Which translates roughly to the following four sentences

  1. In the BFC the boxes are arranged one after the other from top to bottom
  2. The vertical spacing of two adjacent boxes uses the margin attribute
  3. The vertical margins of the two block-level boxes will fold
  4. The outer left edge of each box touches the left edge of the containing block (or right if it is in a right-to-left format), which is also present in float.

I believe you are familiar with the first one, BFC is full of block level boxes, so the normal arrangement is arranged from top to bottom.

The second property is also very familiar, that is the function of margin. We use the margin property for any distance from other elements.

The fourth concept is containing block. In fact, containing block is a visual concept, which can be understood as a rectangular box, similar to the box model. The contain block provides a reference to the contained elements, and the size and position of the elements are often determined by the contain block. It’s a little confusing, isn’t it? We’ll look at that later, just to keep things in suspense. This concept has a lot of capacity, so if you understand containing blocks, you understand article 4.

Now we’re going to focus on the third margin folding, but we’re going to do a little bit of code first

<div style="background-color:blue; margin-bottom: 10px; height:20px"></div>
<div style="background-color:blue; margin-top: 20px; height:20px;"></div>
Copy the code

The browser renders as follows

We’ll notice that the space between the two elements is the same as the height of the elements, only 20px, but 30px as we set it. This phenomenon is called margin folding. From the above we can conclude that the distance between two elements depends on the element with the larger margin.

And then the chestnuts on top we’re extending it a little bit

<div style="height:20px; background-color:red;"></div>
<div style="background-color:pink;">
  <div style="background-color:blue; margin: 10px 10px; height:20px"></div>
	<div style="background-color:blue; margin: 20px 10px; height:20px;"></div>
</div>
Copy the code

The browser renders as follows

Do you see a problem? The upper margin of our first element and the lower margin of our second element do not separate our parent element, and the spacing applies outside the parent element. What if I only want this margin to apply to the parent element? Is there any way? Of course there is. All we need to do is add a CSS property to the parent element overflow: Hidden

<div style="height:20px; background-color:red;"></div>
<div style="background-color:pink; overflow:hidden;">
  <div style="background-color:blue; margin: 10px 10px; height:20px"></div>
	<div style="background-color:blue; margin: 20px 10px; height:20px;"></div>
</div>
Copy the code

The browser renders as follows

From the rendering effect, we can see that margin is already applied to the parent element. This is actually because we created a new BFC that became a separate render area.

There are also cases where there are floating elements, but again, look at the code

<div style="float: left; width: 100px; height: 100px; background-color: blanchedalmond; margin: 20px;"></div>
<div style="background-color: blueviolet; overflow: hidden; margin: 30px;">In 1990, Tim Berners-Lee and Robert Cailliau invented the Web. In 1994, the Web really came out of the lab. [3] Styles have existed in various forms since HTML was invented. Different browsers combine their style languages to give the user control over how the page looks. The original HTML contained very few display attributes.</div>
Copy the code

Let’s take a look at the browser rendering

What happens if you remove overflow: Hidden from the text element? In fact, is the normal text surround effect, this you can verify yourself.

conclusion

Combining theory with practice, you’ll actually find it easier to understand. Only to see the theory is sometimes in the fog, give a person a very hazy feeling. As a common problem in the interview, BFC requires us to deepen our understanding, which is also the knowledge we will encounter and use in work.

Hope this article helps you. Because the level is limited, if there is any problem on the article, I hope you leave a message to correct.