We commonly use, but easy to ignore--css BFC (Block formatting contexts)

bfc--a layout artifact that we can easily ignore

Today, we are going to talk about the concept of BFC , before we say the concept, let us look at an example:

First, define a three div block element

　　

Effect:

　　

We find that the order of the block-level elements is arranged from top to bottom, and then to the next piece, which is explained in the World Wide Block-level box:

In a block-level typesetting context, a box is arranged from the top of the containing block, one by one, vertically.

The vertical margin between the adjacent two boxes is determined by the margin attribute, and the vertical margins between the adjacent two block-level boxes in a block-level typesetting context are collapsed

Let's look at an example:

The code is as follows:

　　

In the diagram we find that when you set the same Margin-bottom value for two block-level elements, a margin collapse occurs between them

　　

observing this diagram, you will find that the margin of the block element of class D1 has been folded with the margin of the D2 block element

　　

In D2 and D3, there is also a folding phenomenon, d3margin-top set to 60px,d2margin-bottom set to 50px, so more 10px

Well, since we found this folding phenomenon, we think about it, how to solve the problem?

Well, today's protagonist debut: BFC

First, BFC concept:

Blocks formatting contexts is a block-level formatting context , where formatting context is a container that determines how documents are rendered

Formatting context is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering rules that determine how its child elements will be positioned, and the relationships and interactions with other elements.

The most common formatting context has the Block fomatting context(BFC) and the Inline formatting context(IFC). CSS2.1 only BFC and IFC, CSS3 also added GFC and FFC.

Above is the concept from the BFC for the, the following say specific :

The BFC element created is a separate box (see bottom right), and only blcok-level box (block-level box) can create BFC, which specifies how the internal block-level box is laid out, And the layout of the standalone box is unaffected by the outside, and of course it does not affect the outside elements . The margin, border, padding, and content in the figure define the element four sides respectively, then the four edges of each type of edge define a box, namely the Content box, padding box, border box, margin box, and determines the vertical spacing of the block box in the containing block from the adjacent block is Margin-box, the Margin-box is always present , even if its margin is 0

OK, the concept we are finished, see here, is not a bit ignorant? Okay, let's talk about the BFC features :

Second, BFC characteristics:

1. The inner box will be placed vertically, starting at the top, one by one.

The distance from the 2.box vertical direction is determined by margin (margins). The margin of the two adjacent boxes belonging to the same BFC is superimposed (the box margin merger problem mentioned in the example)

3.BFC area is not superimposed with float box

4.BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa.

5. When calculating the BFC height, the floating element is also involved in the calculation

6. on the left side of the margin box for each element, contact the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float. (see application Example 2)

So how can we trigger BFC?

Third, trigger BFC:

1. Set property values other than Float:none (ex: Left | right) will trigger BFC

2. Set The value of a property other than overflow:visible (for example: Hidden | Auto | Scroll) will trigger BFC

3. Set the Display property value to: Inline-block | Flex | Inline-flex | Table-cell | Table-caption will trigger BFC.

4. Set the Position property value to: Absolute | Fixed will trigger BFC

5. Using the FIELDSET element (an HTML element that can set the wrapping border for a FORM element) also triggers BFC

OK, the way to trigger BFC we're done, now let's talk about what BFC is used for:

Iv. Application of BFC:

1. Solve Margin Overlay problem

Here's an example:

We give an example of D1 setting a Display:inline-block property

　　

Effect:

　　

At this point, because the D1 block element triggered by the Display:inline-block BFC, so that the margin folding can be resolved, so, at this time the D1 margin-bottom, and D2 margin-top will not be folded.

2. For layout

Here is an example of a flawed adaptive two-column layout:

Give the code First:

　　

We set the Float:left property to D1, then D1 will trigger BFC, we can see the effect:

　

In the figure we find that the D1 trigger Bfc,d2 will contain the D1, which is the left side of the margin-box of the D2 element, in contact with the left side of the D1 box containing the block border (formatted from left to right). This is true even if there is a floating float:left.

Well, we didn't get to the two-column layout we wanted (part of the D2 under D1), so how do we solve this problem now?

First on the code:

　　

Here we set the overflow property for the D2 element, so that it also triggers the BFC, so that the D1 and D2 into two isolated separate boxes, the layout of these two separate boxes is unaffected by the outside, and does not affect the outside elements

We look at the effect:

　　

This effect is what we want the two columns layout effect, this is the use of BFC for the layout of an example, remember! The element that triggers the BFC becomes a separate box, and the layout of the stand-alone box is unaffected by external influences and does not affect the elements outside! This is the essence of BFC!

3. Used to clear floating, calculate BFC height

　　BFC can also be used to clear floating, specific first code:

　　

　　

Effect:

　　

Here we set a border for the parent element, we want the parent element to wrap the D1, but when D1 set the Float property (that is, trigger BFC), we find that the parent element cannot be wrapped D1

So, how do we get rid of the problem caused by float triggering BFC?

We know that at the height of the calculation, the BFC floating element is also involved in the calculation, now the child element D1 has triggered BFC (that is, to become a separate box), then the parent element can also be triggered by the BFC, in the calculation of height can let

The child element D1 also realizes the height calculation of the floating element?

Let's try it out:

　　

We set the Overflow:auto property to the parent element to trigger the BFC

Effect:

　　

Sure enough, the parent element is set to BFC, it is indeed possible to let D1 this floating element with the parent element of the height calculation, so that we solve the use of BFC to clear the floating problem.

Summary: Today, we summarize some of the concepts and applications of BFC, I hope you can understand well. There are many holes in the distance waiting for us to fill it (honey juice smile).

We commonly use, but easy to ignore--css BFC (Block formatting contexts)