BFC? BFC from CSS

Floating and absolute positioning elements, block-level containers of non-block-level boxes (e.g. Inline-blocks, table-cells, and Table-captions), and block-level boxes with overflow values not "visiable", Will create a new block-level formatting context for their content.

In a block-level formatting context, the box is vertically arranged one by one from the top of the containing block, and the vertical gap between the two boxes is determined by their margin value. The vertical margins of the two adjacent block-level boxes will overlap.

In the block-level formatting context, the left outer edge (margin-left) of each box touches the left edge (border-left) of the container (it touches the right edge for a right-to-left format), even if there is a float, unless the box creates a new block-level formatting context.

From the above we can also find a few more important concepts, such as: boxe, block formatting context. There is no doubt that BFC is the block formatting context abbreviation, Chinese is "block-level formatting context" meaning. We found there are other inline formatting context on that page, so we can see what formatting context is:

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 is the Block Fomatting context (abbreviated BFC) and the inline formatting context (IFC). CSS2.1 only BFC and IFC, CSS3 also added GFC and FFC.

And what about the box? Well, let's take a look back:

box is the object and the basic unit of the CSS layout, and the straight point of view is that a page is made up of a number of box (i.e., boxes). The type of the element and the display property determine the type of the box. Different types of boxes are involved in different formatting context (a container that determines how the document is rendered), so the elements inside the box are rendered in different ways. Common types of boxes

The Block-level Box:display property is a block, list-item, table element that generates Block-level box. and participate in block fomatting context. The Inline-level Box:display property is an inline, inline-block, inline-table element that generates Inline-level box. and participate in the inline formatting context. Mom Egg level Four has just floated children to see this English is not easy ah, sometimes we always feel that the book or the official concept of the definition of something that is not conducive to our understanding, so we prefer some teachers in the popular explanation. Here we also have a popular understanding:

BFC is the "block-level formatting context" meaning that the element that created the BFC is a separate box, but only block-level box can participate in the creation of 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.

BFC has some features:

1. The inside box is placed vertically, starting from the top one by one.
2. The vertical distance of the box is determined by margin. The margin of two adjacent boxes belonging to the same BFC will overlap
3. 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.
4. The BFC area is not superimposed with the float box.
5. BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements, or vice versa.
6. When calculating the height of the BFC, floating elements are also involved in the calculation.

All right, what's going on in this stage, the basic concepts we have to understand clearly, not clear to see a few more times, is unclear I guess I write is not easy to understand.

Next I will generally consider why, that is why this problem arises, why this is used, why these effects occur. But this is not written, because I do not know what to write (Cry ...) Ask for high finger points) ...

In the end I was thinking about how, needless to say you also know, is how to solve these problems, these knowledge points how to use, there is no other way.

So how do we use BFC, how to trigger BFC? ：

1. Float value other than none
2. Overflow values other than visible (Hidden,auto,scroll)
3. Display (Table-cell,table-caption,inline-block, Flex, Inline-flex)
4. Position value is (absolute,fixed)
5. FieldSet elements

In the above scenario, you can create BFC.

Next we see how to use BFC, in which scenarios can be used BFC.

1. Solve Margin Overlay problem

2. For layout

We will find that the third feature of the above BFC is that the left margin of the element touches the bounding rectangle that contains the block container, even if there is a float. So how do we solve this problem? Look at the BFC fourth feature above, that is, BFC will not overlap with the floating box, then can we create a new BFC to solve this problem? Take a look at:

When we found that we used Overflow:hidden to trigger the BFC of the main element, the effect appeared immediately, and a two-column layout was so duly fixed ...

3. Used to clear floating, calculate BFC height.

Because the sixth feature above mentions the calculation of the BFC height, the floating element also participates in the calculation, we first look at an example:

We found that because of the two child elements floating in the relationship, two boxes have been removed from the parent element of the containing block, the parent element height has collapsed, we need to let the parent element contains two box child elements, so that when the height is calculated, two floating child elements will participate, so we want to close the float, trigger the parent element of the BFC, Let's continue to look at the effect with Overflow:hidden:

How, the effect is still obvious, of course, clean (closed) floating there are many ways, we can look at a trace of the great God wrote in those years we have cleared the float. Well, it's not much to write about here, BFC is a very strange thing, she has been implicitly exist in our CSS style, but we have to remember that BFC is a page element in a separate action block, it does not affect the layout outside it, the outside of the elements will not affect the layout of the BFC inside.

BFC? BFC from CSS