BFC (Block formatting context): A block-level formatting context is a separate rendering area that has nothing to do with the outside of the area.
BFC Layout Rules:
- The internal boxes will be placed vertically, one by one.
- The vertical distance of Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
- The left side of the margin box for each element is in contact with the left side containing the block border box (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
- The BFC area will not overlap with float box.
- BFC is an isolated container on the page. The sub-elements in the container will not affect the outside elements. And vice versa.
- When calculating the height of BFC, floating elements also participate in the calculation.
That's what I read on my blog when I was learning about BFC.
Personally, I think it's very good. I can study it in my spare time.
The following is my understanding (that is, I want to take a note, according to my understanding):
Scenario 1: Two blocks overlap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adaptive two-column layout</title>
<style>
* {
margin: 0;
padding: 0;
}
.wall {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background-color: lightpink;
}
.main {
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wall">
<div class="aside"></div>
<div class="main"></div>
</div>
</body>
</html>Page effect: 
Use BFC to solve:
// Add overflow to main:
.main {
overflow: hidden;
/* Adaptive two-column layout can be achieved by triggering main to generate BFC */
/* According to BFC Layout Rule 3: The left side of each element's margin box is in contact with the left side containing the block border box (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. */
/* According to BFC Layout Rule 4: BFC area will not overlap with float box */
}Page effect: 
Scenario 2: Set a float for the child element, and the parent element has no height:
This should be an easy problem to encounter when you are just touching a float.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear internal floating</title>
<style>
.par {
border: 5px solid lightpink;
width: 300px;
}
.child {
border: 5px solid lightblue;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>Page effect: 
Since the child element is floated, the child element will be separated from the document stream, and the parent element will not be propped up by the child element, so the parent element has no height.
Use BFC to solve:
// Add overflow to the parent element par
.par {
overflow: hidden;
/* According to Article 6 of BFC Layout Rules: When calculating the height of BFC, floating elements also participate in the calculation. */
/* To achieve a clear internal float, we can trigger par to generate BFC, so when par calculates the height, the floating element child inside par will also participate in it. */
}Page effect: 
3. Case 3: margin overlap
When margins are set for both sub-elements of the same BFC, the vertical margins overlap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preventing Verticality margin overlap</title>
<style>
p {
color: dodgerblue;
background: lightpink;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
</head>
<body>
<p>Block 1</p>
<p>Block two</p>
</body>
</html>Page effect: 
(The vertical distance between two blocks is 100px)
Use BFC to solve:
A div is wrapped in one of the sub-elements to form a BFC region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preventing Verticality margin overlap</title>
<style>
.wrap {
overflow: hidden;
}
p {
color: dodgerblue;
background: lightpink;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
</head>
<body>
<p>Block 1</p>
<!-- according to BFC Article 2 of the Layout Rules: box The distance in the vertical direction is from margin Decision, belong to the same BFC Two adjacent box Of margin There will be overlap. -->
<!-- Can be in p Wrap a container outside and trigger the container to generate a BFC. So two p It does not belong to the same BFC，It won't happen. margin Overlapping -->
<div class="wrap">
<p>Block two</p>
</div>
</body>
</html>Page effect: 
(The vertical distance of two blocks is 200 px)
Summary:
BFC is an independent area isolated from the outside world. Setting the style of its sub-elements is not disturbed by the outside world. When encountering problems such as overlap and coverage between blocks, BFC can generally be used to solve them.
PS: overflow: hidden can solve these problems. See the link: overflow:hidden