My understanding of the BFC in CSS

1. What is BFC

In fact, when the teacher let us write this article called BFC, I do not know what BFC things.

Later, I found some information, I know, BFC is the block formatting context (block-level formatting context) abbreviation, it is a concept of the CSS 2.1 specification, is a separate rendering area, only Block-level box participate, it stipulates the internal Block-level Box How it is laid out and irrelevant to the outside of the area.

2. Under what circumstances will BFC be created

The CSS specification illustrates the creation of a new block formatting context in the following cases:

? floating Elements (Float:left | right);

? Absolute positioning elements (Position:absolute | Fixed);

? Inline block Element (Display:inline-block);

Table cells (DISPLAY:TABLE-CELLS,TD, TH);

The title of the table (display:table-captions,caption);

?‘ Overflow ' attribute is not a visible element (unless the value has been propagated to viewport?);

"Anonymous box" created by Table element

Note that "display:table" itself does not produce "block formatting contexts". However, it can produce an anonymous box that contains a "display:table-cell" box that produces a block formatting context. In summary, for elements of "display:table", the block formatting context is generated by an anonymous box instead of "display:table".

Note that these elements create block formatting contexts, which themselves are not block formatting up or down.

3.BFC Layout Rules:

• The interior is Box placed vertically, one by one.
• BoxThe distance in the vertical direction is determined by margin. BFCoverlapping two adjacent margin that belong to the same Box
• The left side of each element's margin box is in contact with 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.
• BFCThe area does not float box overlap with.
• BFCis a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.
• BFCwhen calculating the height, floating elements are also involved in the calculation

The main function and principle of 4.BFC

1. Self-adapting two-column

Code:

The page works as follows:

This diagram is like the above layout rule 3rd (the left side of the margin box for each element, in contact with 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. As said, although there is a floating element mydiv1, but the left side of Mydiv2 will still touch the left side of the containing block, and according to the layout rule 4th ( BFC the area does not float box overlap), we can generate by triggering BFC the MYDIV2, To implement an adaptive two-column layout:

And when we add (Overflow:hidden), we generate a BFC by triggering mydiv2, and BFC the resulting page effect

Note: This new one BFC does not overlap with floating mydiv1. This will automatically narrow depending on the width of the containing block, and the width of the mydiv1.

2. Clear floating

<! DOCTYPE html>"Utf-8"Content="text/html"> <title></title> <style type="Text/css">. mydiv1{width:100px;            height:150px; float: Left;            Background: #f66; Margin-left:10px;            }. mydiv2{width:100px;            height:150px;            Background: #fcc; float: Left; Margin-left:10px;            }. mydiv3{width:100px;            height:150px; float: Left; Background-color: #ebcccc; Margin-left:10px;            }. wdiv{border:5px solid #9acd32; Width: -%; }    </style>class="WDIV"> <divclass="Mydiv1"></div> <divclass="Mydiv2"></div> <divclass="Mydiv3"></div> </div></body>
In general, we would like to follow the following situation:
But what about the real effect? It is as follows:
This is because the parent container does not surround the floating child elements, commonly known as collapsing
And we want to clear this image, according to the layout rule 6th (the calculated BFC height, the floating element also participates in the calculation), we can trigger WDIV to generate BFC, then wdiv in the calculation of height, wdiv internal floating elements will also participate in the calculation. The code is as follows:
The effect is the same as the first one above, the effect is as follows:
Summarize
Because BFC internal elements and external elements absolutely do not affect each other, BFC it should not affect the layout of the inner box when there is a float outside, and it BFC BFC will be narrowed rather than overlapping with the float. Similarly, when BFC there is a float inside, in order to not affect the layout of external elements, the height is BFC calculated to include the height of the float. Avoiding margin overlap is one of the reasons.
My understanding of the BFC in CSS