What’s it called?

Block Formatting Context: Inner subelements do not affect outer elements. The Formatting of Block Formatting Context, Block Formatting Context, Block Formatting Context, Block Formatting Context, Block Formatting Context, Block Formatting Context

2. What is it?

In popular terms: BFC is an independent layout environment, we can understand as an invisible box, no matter what the elements inside the box do, will not affect the outside. The layout of elements in the BFC is independent of external influences (we often use this feature to eliminate the impact of floating elements on their non-floating siblings and children).

3. What are the conditions for generating BFC?

  • The float value is not None
  • The overflow value is not visible
  • Display value is inline-block/table-cell/table-caption/table
  • The value of position is absolute/fixed

4. What are the application scenarios?

1. Prevent margin overlap

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .a{ width:100px; height:100px; background-color: pink; margin:10px; } .b{ width:100px; height:100px; background-color: rgb(126, 127, 206); margin:10px; } </style> </head> <body> <div> <div class="a">1</div> <div class="b">2</div> </div> </body> </html>Copy the code

It was found that the margins of the two block-level boxes of the same level should be 20px in the vertical direction, but they were only 10px, overlapping

So I use one of the BFC rules: “Overflow: hidden; “To remove the overlap problem

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .a{ width:100px; height:100px; background-color: pink; margin:10px; } .b{ width:100px; height:100px; background-color: rgb(126, 127, 206); margin:10px; } .c{ overflow: hidden; } </style> </head> <body> <div> <div class="a">1</div> <div class="c"> <div class="b">2</div> </div> </div> </body> </html>Copy the code

2. Float problem

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .one{ width:100px; height:100px; background-color: rgb(150, 206, 150); float:left; } .two{ width:200px; height:200px; background-color: rgb(161, 149, 216); } </style> </head> <body> <div> <div class="one">1</div> <div class="two">2</div> </div> </body> </html>Copy the code

Using display: inline – block;

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .one{ width:100px; height:100px; background-color: rgb(150, 206, 150); float:left; } .two{ width:200px; height:200px; background-color: rgb(161, 149, 216); } .father{ display: inline-block; } </style> </head> <body> <div> <div class="one">1</div> <div class="father"> <div class="two">2</div> </div> </div> </body> </html>Copy the code