Ps: It has almost zero usability, but it’s not a good idea to ask in an interview
The understanding of the landing
Block level format context. It refers to a separate block-level render area with block-level BOX participation, which has a set of render rules that govern the layout of the block-level BOX, regardless of the outside of the area.
Let’s start with a phenomenon
A box that does not set a height cannot hold itself up when its content children float.
So we can say that this box didn’t form a BFC
How do I create a BFC
Method ①: float does not have a value of None
Method 2: Pos ition is not stat IC or relative
Method ③: Disp Lay is inline-block, flex, or inline-flex
Method 4: overflow: hidden;
<style>
.father {
/* float: left; * /
/* position: absolute; * /
/* display: inline-block; * /
The optimal * / * /
overflow: hidden;
}
.son {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
<body>
<div class=" father">
<div class="son"></div>
<div class=" son"></div>
<div class=" son"></div>
</div>
</body>
Copy the codeOther roles of the BFC
BFC can cancel box margin field trap
Margin collapse: When the subbox is given a margin facility, it will take the parent box with it, so as to fail to achieve the desired effect
<style>
.father {
width: 200px;
height: 300px;
background-color: pink;
// Avoid box collapse
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
<body>
<div class=" father">
<div class="son"></div>
</div>
</body>
Copy the codeThe BFC can prevent elements from being overwritten by floating elements
Do you need to explain this? The phenomenon of floating elements running blind
<style>
.son {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.son-last {
width: 200px;
height: 300px;
background-color: red;
overflow: hidden;
}
</style>
<div>
<div class="son"></div>
<div class="son"></div>
<div class="son-last"></div>
</div>
Copy the code** In short, BFC allows the box to be its own master and not be easily changed by the outside world. A stinking stone in the manger