Getting to Know BFC
Let me talk about how to open BFC first:
1. Set display properties: inline-block, flex, grid
2. Set positioning attributes: absolute, fixed
3. Set overflow attributes: hidden, auto, scroll
4. Set float (deprecated)
It is worth noting that: body itself is a BFC element.
In addition, it is recommended to use * overflow: hidden;to enable BFC, because the cost is the smallest, and it will not affect the layout like setting positioning and floating. *
Elements enable the function of BFC:
For convenience, the following examples illustrate that overflow: hidden;BFC is enabled through settings.
1. Does not overlap with floating elements
The html code is as follows:
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
The css code is as follows:
*{
margin: 0;
padding: 0;
}
.div1 {
width: 150px;
height: 150px;
background-color: yellow;
}
.div2 {
width: 180px;
height: 180px;
background-color: orange;
}
Define two div boxes, determine their size and background color.
After setting div1 to float to the left, it breaks away from the document flow and does not occupy the position, so it overlaps with div2.
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-859PryRw-1678067988404) (%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/1%201. png)]
After we set div2 overflow: hidden;, div2 becomes a BFC element and no longer overlaps with div1.
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-b2gI34YS-1678067988405)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/2.png) ]
2. Solve the problem of high collapse
The html code is as follows:
<div class="box">
<div class="div1"></div>
</div>
The css code is as follows:
.box{
background-color: skyblue;
}
.div1{
width: 150px;
height: 150px;
background-color: yellow;
}
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-AZJGe9Y6-1678067988407)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/6.png) ]
After setting div1 to float to the left, it is found that only div1 is displayed on the page. But it stands to reason that the box itself is a block-level element and should occupy a single line. What's going on?
It turns out that the box itself has no height, it is supported by the height of div1. After setting the float for div1, it breaks away from the document flow, so the height of the box becomes 0, and there is a problem of height collapse.
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-UU9oTUgq-1678067988409)(%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/4.png) ]
And after we make the box a BFC element, it has a height.
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-zrI6Njg7-1678067988410) (%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/6%201. png)]
3. Solve the problem of overlapping margins
What is margin overlap?
If the upper and lower block-level elements located in the same BFC set relative margins, the margins will be collapsed (also called overlapping), so that the distance between the two elements is the value with the larger margin.
The html code is as follows:
<div class="div1">1</div>
<div class="div2">2</div>
The css code is as follows:
* {
margin: 0;
padding: 0;
}
.div1 {
width: 150px;
height: 150px;
background-color: orange;
}
.div2 {
width: 150px;
height: 150px;
background-color: skyblue;
}
Define two div boxes, determine their size and background color.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Pmu7E8iQ-1678067988411) (%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/1%202. png)]
Then set the first box margin-bottom:100px;and the second box margin-top:120px. According to conventional understanding, they should be 220px apart.
But actually, their distance is 120px apart. This is because the parent elements of div1 and div2 are both body, and body itself is a BFC element, and the div elements located in the same BFC area set relative margins, so the margins overlap.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-6MW2vYVO-1678067988412) (%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/2%201. png)]
So how to solve the problem of overlapping margins? Only block-level elements located in the same BFC area may have overlapping margins, so let's find a way to keep them out of the same BFC area, and the problem will be solved!
Therefore, you can nest a box box outside the div2 element, and then enable BFC for the box. Div1 and div2 are located in different BFC elements, and the outer margin will not be collapsed.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-fgCl8cHQ-1678067988412) (%E5%88%9D%E8%AF%86BFC%20474691febe3f454096eea2b557999bc5/4%201. png)]
source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
margin-bottom: 100px;
width: 150px;
height: 150px;
background-color: orange;
}
.div2 {
margin-top: 120px;
width: 150px;
height: 150px;
background-color: skyblue;
}
.box{
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="box">
<div class="div2">2</div>
</div>
</body>
</html>