Home > Others

What is BFC

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

BFC Introduction
Box Box model
Formatting Context
BFC definition
BFC Layout Rules:
How to generate BFC
BFC applications
1 Adaptive two-column layout
2 Clear Float
3 Clear Float

BFC Introduction Box Box model

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:

    • block-level Box:d The Isplay property is the block, list-item, table element that generates Block-level box. and participate in block fomatting context;
    • inline-level Box:d The Isplay 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, according to the following sibling elements to decide that they are block or inline here do not say first.
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).

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 has no effect on the outside of the area . 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.

BFC Layout Rules:
    1. The inner box is placed vertically, one by one.
    2. The left side of the margin box for each element in the interior touches 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.
    3. The BFC box does not overlap with the float box.
    4. When the BFC box calculates the height, the internal floating elements are also involved in the calculation
    5. Vertical margin does not overlap between adjacent two BFC box. Vertical margin of two adjacent boxes within the same BFC overlap
How to 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
BFC Application 1 Adaptive two-column layout 
  
 
    
   
  
  1. 
  
  2. <style>
    3. 
   
  
  3. 
  
  4.  body {
    5. 
   
  
  5. 
  
  6.  width: 300px;
    7. 
   
  
  7. 
  
  8.  position: relative;
    9. 
   
  
  9. 
  
  10.  }
    11. 
   
  
  11. 
  
    13. 
   
  
  13. 
  
  14.  .aside {
    15. 
   
  
  15. 
  
  16.  width: 100px;
    17. 
   
  
  17. 
  
  18.  height: 150px;
    19. 
   
  
  19. 
  
  20.  float: left;
    21. 
   
  
  21. 
  
  22.  background: #f66;
    23. 
   
  
  23. 
  
  24.  }
    25. 
   
  
  25. 
  
    27. 
   
  
  27. 
  
  28.  .main {
    29. 
   
  
  29. 
  
  30.  height: 200px;
    31. 
   
  
  31. 
  
  32.  background: #fcc;
    33. 
   
  
  33. 
  
  34.  }
    35. 
   
  
  35. 
  
  36. </style>
    37. 
   
  
  37. 
  
  38. <body>
    39. 
   
  
  39. 
  
  40.  <div class="aside"></div>
    41. 
   
  
  41. 
  
  42.  <div class="main"></div>
    43. 
   
  
  43. 
  
  44. </body>
    45.

According to the BFC layout rule 2nd:

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 rule 3rd:

The BFC area does not overlap with the float box.

We can implement an adaptive two-column layout by triggering main to generate BFC.

 
   
  
    
  
    
   
  1. .main {
    2. 
  
    
   
  2.  overflow: hidden;
    3. 
  
    
   
  3. }
    4.

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

2 Clear Float 
  
 
    
   
  
  1. 
  
  2. <style>
    3. 
   
  
  3. 
  
  4.  .par {
    5. 
   
  
  5. 
  
  6.  border: 5px solid #fcc;
    7. 
   
  
  7. 
  
  8.  width: 300px;
    9. 
   
  
  9. 
  
  10.  }
    11. 
   
  
  11. 
  
    13. 
   
  
  13. 
  
  14.  .child {
    15. 
   
  
  15. 
  
  16.  border: 5px solid #f66;
    17. 
   
  
  17. 
  
  18.  width:100px;
    19. 
   
  
  19. 
  
  20.  height: 100px;
    21. 
   
  
  21. 
  
  22.  float: left;
    23. 
   
  
  23. 
  
  24.  }
    25. 
   
  
  25. 
  
  26. </style>
    27. 
   
  
  27. 
  
  28. <body>
    29. 
   
  
  29. 
  
  30.  <div class="par">
    31. 
   
  
  31. 
  
  32.  <div class="child"></div>
    33. 
   
  
  33. 
  
  34.  <div class="child"></div>
    35. 
   
  
  35. 
  
  36.  </div>
    37. 
   
  
  37. 
  
  38. </body>
    39.

According to the BFC layout rule 4th:

When calculating the height of the BFC, floating elements are also involved in the calculation

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

Code:

 
   
  
    
  
    
   
  1. .par {
    2. 
  
    
   
  2.  overflow: hidden;
    3. 
  
    
   
  3. }
    4.

The effect is as follows:

3 Clear Float 
  
 
    
   
  
  1. 
  
  2. <style>
    3. 
   
  
  3. 
  
  4.  p {
    5. 
   
  
  5. 
  
  6.  color: #f55;
    7. 
   
  
  7. 
  
  8.  background: #fcc;
    9. 
   
  
  9. 
  
  10.  width: 200px;
    11. 
   
  
  11. 
  
  12.  line-height: 100px;
    13. 
   
  
  13. 
  
  14.  text-align:center;
    15. 
   
  
  15. 
  
  16.  margin: 100px;
    17. 
   
  
  17. 
  
  18.  }
    19. 
   
  
  19. 
  
  20. </style>
    21. 
   
  
  21. 
  
  22. <body>
    23. 
   
  
  23. 
  
  24.  <p>Haha</p>
    25. 
   
  
  25. 
  
  26.  <p>Hehe</p>
    27. 
   
  
  27. 
  
  28. </body>
    29.

The distance between two P is 100px, and margin overlap is sent.

According to the BFC layout rule 5th:

Vertical margin does not overlap between adjacent two BFC box. Vertical margin of two adjacent boxes within the same BFC overlap

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

Code:

  
 
    
   
  
  1. 
  
  2. <style>
    3. 
   
  
  3. 
  
  4.  .wrap {
    5. 
   
  
  5. 
  
  6.  overflow: hidden;
    7. 
   
  
  7. 
  
  8.  }
    9. 
   
  
  9. 
  
  10.  p {
    11. 
   
  
  11. 
  
  12.  color: #f55;
    13. 
   
  
  13. 
  
  14.  background: #fcc;
    15. 
   
  
  15. 
  
  16.  width: 200px;
    17. 
   
  
  17. 
  
  18.  line-height: 100px;
    19. 
   
  
  19. 
  
  20.  text-align:center;
    21. 
   
  
  21. 
  
  22.  margin: 100px;
    23. 
   
  
  23. 
  
  24.  }
    25. 
   
  
  25. 
  
  26. </style>
    27. 
   
  
  27. 
  
  28. <body>
    29. 
   
  
  29. 
  
  30.  <p>Haha</p>
    31. 
   
  
  31. 
  
  32.  <div class="wrap">
    33. 
   
  
  33. 
  
  34.  <p>Hehe</p>
    35. 
   
  
  35. 
  
  36.  </div>
    37. 
   
  
  37. 
  
  38. </body>
    39.

The effect is as follows



From for notes (Wiz)

What is BFC

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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