Understanding BFC (Block-level visual context) in CSS [translate]

Opening

Some elements, such as the float element, such as the element position is Absolute,inline-block,table-cell or table-caption, and the overflow attribute is not a visible element, They will create a new block-level formatting context.

The above definition has described in detail how block-level formatting contexts (blocks formatting context) are formed, and for convenience, the text is replaced with BFC. Now, let's redefine it in a simple way:
BFC is also a box in HTML (invisible), which can be formed only if at least one of the following conditions is met BFC:

• The Float property is notnone.

• The Position property is notstatic和relative.

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

• The overflow property is notvisible.

Let's build a BFC

The HTML code is as follows:

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

We can use CSS to attach the above conditions to the container container, such as overflow: scroll, overflow: hidden, display: flex, float: left, or display: table. although these conditions can form a BFC, but they each have a different performance:

• Display:table:在响应式布局中会有问题

• Overflow:scroll:可能会出现你不想要的滚动条

• Float:left:使元素左浮动，并且其他元素对其环绕

• Overflow:hidden:消除溢出部分

So the best way to build BFC is to overflow:hidden :

.container{  overflow: hidden;}

In BFC, how are block-level elements laid out?

The specifications are described as follows:

In a block formatting context, each box's left outer edge touches the left edge of the 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 could shrink due to the floats), unless the box EST Ablishes a new block formatting context (in which case, the box itself may become narrower due to the floats). bfcbfc.jpg

Simply put: All boxes belonging to BFC are left-aligned by default, and their left margin can reach the left side of the container container. The last box, although it is floating, still follows this principle. (floating in BFC will be described below.)

－那么，BFC到底有什么卵用呢？

－实际上，真的特别有用

1. Use BFC to eliminate margin Collapse

Under normal circumstances, all boxes in a container will be arranged vertically from top to bottom, that is, one of the elements we call a row, and tangent vertical distance (that is, margin) is determined by the respective margin, rather than the two margin overlay.

Let's take a 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 and (20px), but actually 10px. This is actually collapsing margins.

The results are as follows:

This seems to be a bit confusing, BFC led to the margin collapse, and now also use it to solve the margin cllapse. But always remember one thing: margin in the vertical direction only when the element is in the same BFC
To Clollpase. If they belong to a different BFC, there will be no margin collapse. So we can set up a BFC to prevent the occurrence of margin collpase.

Now HTML becomes:

<div  class  = "container" ;  <p ;  Sibling 1</p ;  <p ;  Sibling 2</p ;  << Span class= "Hljs-title" >div  class  = "NEWBFC" ;  <p ;  Sibling 3</p ;  </ div ;  </div    

CSS has also changed:

. Container {  background-color: red;  Overflow: hidden; / * Creates a block formatting context * / }P {  margin: tenpx 0;  background-color: lightgreen; }. NEWBFC {  overflow: hidden; / * Creates new block formatting context * / }

Now the result is:

Because the second P element and the third P element belong to different BFC, the margin collapse is avoided.

2. Use BFC to accommodate floating elements

I believe that you will often encounter a container with floating elements, but the height of this container is 0 of the scene, such as:

Look at the following example:

Html:

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

Css:

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

Results:

In the case above, container is not highly, because it contains a floating element. Usually we solve this problem by using 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 container form the BFC rule, the result is as follows:

.container  { overflow :  hidden  ; /* creates block formatting context */ background-color :  Green ;    .container  div  {float :  left  ; background-color :  LightGreen  ; margin :    px  ;    

Results:

3. Block text wrapping with BFC

Sometimes, in most cases (without special settings), the text wraps around the floating element (Figure 1),
But sometimes it's not what we expect, we want Figure2.

It is often possible to use margin-left to force P's 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 the problem.

First let's look at the principle of text wrapping:

In Figure1, the entire P element is actually in the black area, and the P element does not move because it is below the floating element. But actually P is moved as a block-level element (relative to the inline text), because the float element is given a ' space ' position, and as the text increases, the text height exceeds the floating element and the part does not shrink the inner distance horizontally, so it looks like wrapping.

Before we solve this problem, let's take a look at the description of the specifications in this area:

In a block formatting context, each box's left outer edge touches the left edge of the 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 could shrink due to the floats), unless the box EST Ablishes a new block formatting context (in which case, the box itself may become narrower due to the floats).

The BFC provides a solution to this situation: to unless the box establishes a new block formatting context establish the P-.

Results:

注：此文为译文
Blog Please poke
Please poke in the original

Understanding BFC (Block-level visual context) in CSS [translate]