Landing the definition
Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.
Block formatting context (BFC) is an independent rendering area in which the layout of internal elements is not influenced by the outside world. And in a BFC, Block boxes and row boxes (which consist of all inline elements in a row) are arranged vertically along the border of their parent element.
Landing the features
- The upper and lower margins of two adjacent containers belonging to the same BFC overlap.
- The floating element also plays a role in calculating the height of the BFC (important)
- BFC areas do not overlap with floating containers (important)
- The containers in the BFC are arranged vertically
- The margin-left of the element touches the border-left of its containing block
- The BFC is a standalone container, and elements inside the container do not affect elements outside the container
Landing the create
- The float property is not None
- The position attribute is absolute or fixed
- Display inline-block, table-cell, flex, inline-flex
- Overflow is hidden, auto, scroll
- HTML root element
Landing the role of
- Solve the vertical margin overlap problem between adjacent boxes
- Clear float, solve box collapse problem
- Resolve parent element margin merge (margin collapse)
- Solve floating around text problem
(1) Solve the problem of vertical margin overlap between adjacent boxes:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.marginBottom, .marginTop {
width: 100px;
height: 100px;
background: red;
}
.marginBottom {
margin-bottom: 20px;
}
.marginTop {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="marginBottom"></div>
<div class="marginTop"></div>
</body>
</html>
Copy the code 
Boxes with style classes.marginbottom and.margintop are inside the same BFC, so adjacent margins overlap, resulting in a margin of 20px between the two boxes
Add a.container shell to the.marginBottom box and set the overflow of the container to hidden, so that the two boxes are in different BFC’s, removing margin overlap
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.marginBottom, .marginTop {
width: 100px;
height: 100px;
background: red;
}
.marginBottom {
margin-bottom: 20px;
}
.marginTop {
margin-top: 20px;
}
.container {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="marginBottom"></div>
</div>
<div class="marginTop"></div>
</body>
</html>
Copy the code 
When all the child elements in a standard flow box are floating and the height of the box is not set, the height of the whole box will collapse. The height of the floating child element is not counted in the parent element, and the height of the parent element is 0.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.child {
width: 100px;
height: 100px;
background: red;
float: left;
}
.container {
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
Copy the code 
Container height is 0, add overflow: Hidden to the box of container, and then trigger BFC, you can see that container has height.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.child {
width: 100px;
height: 100px;
background: red;
float: left;
}
.container {
background: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
Copy the code 
Margin merge means that when two vertical margins meet, they will form a margin. The height of the merged margins is equal to the greater of the two merged margins. (CSS margin merge)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.child {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
.container {
background: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
Copy the code 
When child sets margin-top to 20px, both container and child increase the margin by 20px, instead of the child increasing the margin by 20px relative to the container
Add overflow trigger BFC to container element:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.child {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
.container {
background: yellow;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
Copy the code 
(4) To solve the floating around text problem
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { width: 100px; height: 100px; background: red; float: left; } </style> </head> <body> <div class="box"></div> </div> </body> </ HTML >Copy the code 
Text surrounds the box block, and the second element is partially overwritten by the floating element (but the text message is not). If you want to avoid overwriting the element, you can invoke the BFC feature of the second element and add overflow: Hidden to the second element
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { width: 100px; height: 100px; background: red; float: left; } .text { overflow: hidden; } </style> </head> <body> <div class="box"></div> <div Class ="text"> </div> </body> </ HTML >Copy the code 
conclusion
The BFC is consistent with its definition, creating a separate render area where the layout of the elements inside is not influenced by the outside world; This is a way to achieve style effects that are independent of other elements.