Front-end interview: When asked about BFC, you must answer this way to get full marks

Tip: As a high-frequency test site for front-end interviews, BFC is often asked what is BFC? The role of BFC? How to trigger BFC? these questions. However, the answers of the candidates are often unsatisfactory. It is either unclear or incomplete. After reading this article, I believe that you will have a deeper understanding of BFC!

---

BFC

1. Understand

Official explanation: BFC (Block formatting context) is literally translated as "block formatting context", which is a separate rendering area that specifies how the interior is laid out and the child elements of this area will not affect the elements outside.
To put it bluntly: BFC is like a safe area. The layout of all elements in this area (including floating, positioning, etc.) will not affect the layout of other elements outside.

2. Function

1. 清除浮动
2. 处理外边距合并问题(又叫外边距塌陷)
3. 使浮动元素不遮挡普通元素

3. Scenario demonstration

3.1 Clear float

If we want to design the above job-seeking function module, when we design the entire job-seeking module, we do not know how many sub-modules need to be added later, so often 不会给外层容器添加高度, the sub-modules automatically open the entire container.

Next, we need to align all submodules to the left, so float (float: left) is often set, as follows:
css

<style>      
	div {
     
     
		/*只给容器设置了宽度*/
		width: 300px;
		padding: 10px;
		background-color: #fae8c8;
	}
	span {
     
     
		/*给子模块添加浮动*/
		float: left;
		padding-bottom: 30px;
		width: 25%; 
	}
</style>

html

<div>
    <h2><a class='title1'>求职简历</a></h2>
    <span><a href="#">销售</a></span>
    <span><a href="#">导购</a></span>
    <span><a href="#">厨师</a></span>
    <span><a href="#">房产经纪</a></span>
    <span><a href="#">文员</a></span>
    <span><a href="#">收银</a></span>
    <span><a href="#">配菜</a></span>
    <span><a href="#">保险经纪</a></span>
    <span><a href="#">前台</a></span>
    <span><a href="#">营业员</a></span>
    <span><a href="#">服务员</a></span>
    <span><a href="#">人事</a></span>
    <span><a href="#">客服</a></span>
    <span><a href="#">保安</a></span>
    <span><a href="#">洗碗工</a></span>
    <span><a href="#">平面设计</a></span>
    <span><a href="#">会计</a></span>
    <span><a href="#">电工</a></span>
    <span><a href="#">迎宾</a></span>
    <span><a href="#">仓车管理</a></span>
</div>

The result is indeed the same:

due to the floating of the span tag (submodule), it is separated from the document flow, so it will no longer help the parent container to stretch the height, which leads to the common "floating collapse" phenomenon . To solve this phenomenon, we need to Clear the float, here we can use BFC :
There are many conditions for triggering BFC, here we take adding overflow(hidden) to the parent element as an example:
(In the following section, I will summarize the common ways to trigger BFC conditions)

div {
    
    
	/*我们只需要在原基础上，向父元素添加overflow：hidden属性即可*/
	overflow: hidden;
	width: 300px;
	padding: 10px;
	background-color: #fae8c8;
}

The effect

is visible, just set the overflow: hidden attribute to the parent container to trigger the BFC feature, and the parent container will become a special " BFC container ". In fact, a key feature of BFC
is shown here , that is: when calculating the height of BFC, floating elements will also participate in the calculation . So that's why BFC can clean up the negative effects of floating!

3.2 Handling Margin Merging/Collapse

Suppose we have two elements:

we set the blue module 下外边距and the red module 上外边距respectively. Assuming that the two outer margins are set to 20px respectively, then we can easily think: the distance between the two modules = 20px + 20px, that is 40px distance between them.

The code practice is as follows:
css

<style>
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /*添加下外边距*/ 
        margin-bottom: 20px;   
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        /*添加上外边距*/ 
        margin-top: 20px;       
    }
</style>

html

<div class="blue"></div>
<div class="red"></div>

The result was less than ideal:

yes, the two margins merged together, hence the name "margin merge" . (If the distance between the two sides is not equal, choose the largest outer margin as the distance between the two). To solve the problem of merging margins, we can wrap the two elements in a box with the BFC attribute :
css

<style>
    .BFC_container {
     
     
    	/*设置overflow触发BFC*/
        overflow: hidden;
    }
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-bottom: 20px; 
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px; 
    }
</style>

html

/*分别将两个元素包裹在一个附带BFC属性的容器中*/
<div class="BFC_container">
    <div class="blue"></div>
</div>

<div class="BFC_container">
    <div class="red"></div>
</div>

Effect

Therefore, the second role of BFC is to deal with the collapse of the outer margin of the element.

3.3 Floating elements no longer cover normal elements

We all know that the floating element will be out of the flow of the document, which may cause the negative situation of obscuring other ordinary elements, as follows:

we can see that the orange floating element obscures the green ordinary element, then we want to let the planes line up and no longer affect each other , you can add BFC attributes to ordinary elements to complete:
css

<style>
    .float_div {
     
     
        float: left;
        width: 100px;
        height: 100px;      
        background-color: tomato;
    }
    .common_div {
     
     
    	/*给普通元素添加BFC属性*/
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: springgreen;
    }
</style>

html

<div class="float_div">浮动元素</div>
<div class="common_div">普通元素</div>

Effect:

We can see that by setting the BFC attribute to the common element, the two elements will not stick to each other and affect each other.

3. Common conditions for triggering BFC

1. The overflow property is 不为visible (such as: hidden, scroll)
2. The float property is 不为none (eg: left, right)
3. position 只有is absolute or fixed

The above three are the most commonly used conditions for triggering BFC, and the most recommended triggering method is: overflow: hidden .

• Because setting scroll will add a drag bar to the right of the border.
• Triggering BFC with the float attribute may cause other module layouts, because this module generates a float and is out of the document flow
• Setting the positon property may also involve affecting the layout of other modules

Therefore, the most recommended method is to use overflow: hidden to trigger the BFC attribute, which can reduce the least cost to solve the problem!