BFC Magic Behind the principle (turn)

Last Update:2015-08-26 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

BFC is already an ear to hear ripe words, there are many articles on the internet about BFC, describes how to trigger BFC and some of the BFC of the use (such as clear float, prevent margin overlap, etc.). Although I know how to use BFC to solve these problems, but when people ask me what BFC is, I still can not very strong to explain clearly. So these two days carefully read the CSS2.1 spec and many articles to fully understand the BFC.

What is BFC?

Before explaining what BFC is, you need to first introduce the concept of Box, formatting context.

BOX:CSS basic unit of layout

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 lot of Box. 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. Let's see what the boxes are:

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;
Run-in BOX:CSS3 in the first place, here is not to say.

Formatting context

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 increased GFC andFFC。

BFC definition

BFC (block formatting context) literal translation is "chunk-level formatting context". It is a separate rendering area that only block-level box participates in, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area.

BFC Layout Rules:

The inner box is placed vertically, one by one.
The vertical distance of the box is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap
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.
The BFC area does not overlap with the float box.
BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.
When calculating the height of the BFC, floating elements are also involved in the calculation

Second, which elements will generate BFC?

root element
The Float property is not none
Position for absolute or fixed
Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex
The overflow is not visible

Third, the function and principle of BFC 1. Adaptive two-column layout

Code:

12345678910111213141516171819202122 <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background:#f66; } .main { height: 200px; background:#fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body>

Page:
　　

According to the BFC layout rules, article 3rd:

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.

Therefore, although there is a floating element aslide, the left side of main will still touch the left side of the containing block.

According to the BFC layout rules, article fourth:

BFCThe area does not float box overlap with.

We can implement an adaptive two- BFC column layout by triggering the main build.

123	`.main {` `overflow: hidden;}`

When the main generator is triggered BFC , the new one BFC does not overlap with the floating aside. As a result, the width of the containing block, and the width of the aside, automatically narrows. The effect is as follows:

2. Clear internal float

Code:

12345678910111213141516171819 <style> .par { border: 5px solid#fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; }</style><body> <div class="par"> <div class="child"></div> <div class="child"></div> </div></body>

Page:
　　

According to the BFC layout rules, article sixth:

BFCwhen calculating the height, floating elements are also involved in the calculation

In order to clear the internal float, we can trigger par generation BFC , then par in the calculation of height, the floating element inside par will also participate in the calculation.

Code:

123	`.par {` `overflow:` `hidden;}`

The effect is as follows:
?

3. Prevent vertical margin overlap

Code:

1234567891011121314 <style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; }</style><body> <p>Haha</p> <p>Hehe</p></body>

Page:
　　

The distance between two P is 100px, and margin overlap is sent.
According to the BFC layout rule, Article II:

BoxThe distance in the vertical direction is determined by margin. BFCoverlapping two adjacent margin that belong to the same Box

We can wrap a layer of containers outside p and trigger the container to generate one BFC . Then two P will not belong to the same BFC , there will be no margin overlap.
Code:

12345678910111213141516171819 <style> .wrap { overflow: hidden; } p { color: #f55; background:#fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; }</style><body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div></body>

The effect is as follows:
　　

Summarize

In fact, some of the above examples show the BFC layout rules fifth:

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.

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.

BFC Magic Behind the principle (turn)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

BFC Magic Behind the principle (turn)

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support