Analysis of BFC and Analysis of bfc

Analysis of BFC and Analysis of bfc

What is BFC?

Dung boy?

Of course not. BFC: The English name of Block formatting context ". It is a concept in the W3C CSS 2.1 Standard that determines how elements locate content and the relationship and interaction with other elements. The following table describes the features of the BFC element and how to become a BFC element.

BFC (see W3C)
Features	When layout the box model, if an element meets the BFC condition, the element becomes an isolated independent container,BFCDoes not overlap with the External Floating element, and in the same BFCThe outer margins of two adjacent block-level elements in the same, but different BFCThe outer margin does not overlap.The floating element inside the height is also included. In short, BFC and external elements do not affect each other
How to trigger BFC	1. root element 2. the float attribute is not none. 3. position: absolute or fixed 4. The value of overflow is not visible. 5. The value of display is table-cell, table-caption, or any of the inline-blocks.

After talking for a long time, you may ask, what is the use of element as BFC?

This requires you to start with its features, especially the bold Section,BFC elements prevent overlap with floating ElementsWell.

Well? What does it mean. Take a look at the demo below

<! DOCTYPE html> Run the code, open the chrome debugger, and click the normalDiv element. We can see that some of normalDiv are blocked by floatDiv, that is, they overlap.

So we will trigger normalDiv as BFC. For example, if the overflow attribute is set to Den den, run the code and check the result.

<! DOCTYPE html>  

The running result shows that when we trigger normalDiv as BFC, it does not overlap with floatDiv.

Okay, thanks. I also know that BFC does prevent overlap with floating elements. What is the purpose?

Adaptive Layout !!! (Next)

 

Starting with its features, we can also knowBFC can prevent overlap of the outer margin.

We all know that the vertical margin of block-level elements will overlap, for example

<! DOCTYPE html>  

As you can see from the preceding running results (in red), their vertical margin overlaps.

The reason is that they belong to the same BFC (root element), and the outer margin is overlapped. So you just need to add one of them to another BFC.

For the code and demo, see:

<! DOCTYPE html>

Run the code and find that.

 

Starting with its features, we can also knowBFC can be clearly floating. I used to know how to solve the "collapse" problem. You can add overflow: hidden to the parent element to wrap the floating element and clear the floating element, but I don't know the reason. Later I realized that it had used to calculate the parent element BFC. Therefore, when calculating the height of the parent element, the floating element was included, and because BFC did not affect the external element, so it's clear that it's floating.

This operation does not set the parent element BFC

<! DOCTYPE html>

This is the operation after the parent element BFC

<! DOCTYPE html>  

Haha, that's true.

It seems that it is good at triggering element BFC, which has many advantages.