Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
1. What is a landing
The whole process of BFC is Block Formatting Context, which is defined as follows in MDN:
Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.
The BFC is a completely independent box, and no matter what style the elements inside are, they do not affect the layout of the outside of the box.
2. The trigger landing
- The root element
<html> - Float element (
floatDon’t fornone) - Fixed positioning, absolute positioning elements (
positionforabsoluteorfixed) - Inline block elements (
display: inline-block) - Table cells (
display: table-cell) the default - Form Title (
display: table-caption) the default overflowDon’t forvisible- Elastic element (
display: flex) - Grid elements (
display: grid) - .
3. Solve problems using BFC
1. Margin collapse
For both boxes, the margin is set to 50px. The spacing between the two boxes should be 100px, but the actual spacing is 50px.
This is because of the problem of margin collapse, the margin of the two boxes overlapped and influenced each other.
<style>
.son {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}
</style>
<body>
<div class="son"></div>
<div class="son"></div>
</body>
Copy the code
BFC can be used to solve the problem of margin collapse. Put these two boxes in the two BFC areas, because the BFC is a completely separate box, and the elements inside do not affect the external areas.
To solve the problem, change the above code to the following, and change the spacing between the two boxes to 100px:
<style>
.father {
background-color: yellow;
/* Trigger BFC */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
2. The inner margin contains collapse
Box in the following code, father-son relationship, give a child added margin – top box, the father box will follow together.
<style>
.top {
height: 50px;
width: 200px;
background-color: pink;
}
.father {
width: 200px;
height: 200px;
background-color: yellow;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style>
<body>
<div class="top">At the top of the element</div>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
BFC can be used to solve the inclusion collapse problem. Make the parent box a BFC so that the styles inside the parent box do not affect the layout outside.
Trigger BFC with Overflow: Hidden:
<style>
.top {
height: 50px;
width: 200px;
background-color: pink;
}
.father {
width: 200px;
height: 200px;
background-color: yellow;
/* Trigger BFC */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style>
<body>
<div class="top">At the top of the element</div>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
3. Clear the impact caused by floating
The following code, a parent box with no height set, inside a child box set to float, then the parent box lost height, do not show on the page.
<style>
.top {
height: 50px;
width: 200px;
background-color: pink;
}
.father {
width: 200px;
background-color: yellow;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
<body>
<div class="top">At the top of the element</div>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
You can use the BFC feature to solve the floating problem. Because the parent box has no height, it must affect the layout of the external elements. That triggers the BFC for the parent box, so that the child boxes inside the parent box do not affect the external layout:
<style>
.top {
height: 50px;
width: 200px;
background-color: pink;
}
.father {
width: 200px;
background-color: yellow;
/* Trigger BFC */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
<body>
<div class="top">At the top of the element</div>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
4. Prevent floating elements from overwriting the standard stream
If one box is set to float while the other is still standard flow, the floating box will override the standard flow box, showing the following effect:
<style>
.div1 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div2 {
height: 300px;
background-color: yellow;
font-size: 26px;
}
</style>
<body>
<div class="div1"></div>
<div class="div2">I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way.</div>
</body>
Copy the code
As you can see, the text in the standard flow box (yellow box) is affected by the floating flow box (blue box), with the text surrounding the blue box.
You can take advantage of the BFC features to solve this problem. The standard flow box triggers the BFC and the floating element does not overwrite the standard flow box and does not affect the text inside:
<style>
.div1 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div2 {
height: 300px;
background-color: yellow;
font-size: 26px;
/* Trigger BFC */
overflow: hidden;
}
</style>
<body>
<div class="div1"></div>
<div class="div2">I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way. I was pushed out of the way.</div>
</body>
Copy the code
In addition, the width of the yellow box is also adaptive, according to the width of the blue box, automatically adjust the width.