preface
We may not have heard of BFC in front-end layouts, but we certainly have used BFC in many places, and many developers only talk about the role of BFC, which is not very clear. With this in mind, this article will take a deeper look at BFC in CSS.
The full text summary
1 What is FC
Before we talk about BFC, let’s review document flow in a web layout. There are three common document flows: standard flow, floating flow, and location flow. FC in BFC is the standard flow. For more on document flow, see my previous article: juejin.cn/post/695983…
Formatting Context refers to a Context that has some CSS Formatting rules (layout rules), in which all child elements are arranged according to their particular CSS Formatting rules.
We can assign a specific formatting context to an element that acts as a container, which in this case is a render area with specific layout rules. Common formatting contexts are:
- BFC (Block-level formatting Context)
- IFC (Inline formatting context)
- FFC (Adaptive Formatting Context)
- GFC (Grid Layout Formatting Context)
2 What is BFC
- Full name: block-level formatting context, is an external independently rendered area.
- Is a rule that isolates and protects the inside elements from the outside elements through the BFC layout.
- It’s a property of an element, and when an element has a BFC, that element can be thought of as being isolated, a separate container.
BFC is just like the Monkey King in Journey to the West, who drew a circle to let the master and his younger brother stay in the circle, so that the goblins can’t hurt the master and his younger brother. This circle is BFC, whose function is isolation and protection. In practice, we also use BFC to solve practical problems.
3 How do I trigger the BFC
Not just any element can be considered a BFC, but only if it satisfies one of the following criteria.
- Float not none(left, right)
- Position is not relative (Absolute, fixed)
- Overflow is not visible (hidden, auto, scroll)
- Display: flex, line-block, table-cell, table-caption
- HTML root element
4 landing the features
- The internal boxes will be placed one after the other vertically
- The vertical distance is determined by margin
- The region of the BFC does not overlap with the element region of float
- When calculating the height of the BFC, floating elements are also involved
- A BFC region contains only its children, not its children
5 BFC application scenarios
After understanding the conditions and features that trigger the BFC, we need to use the features of the BFC to solve some practical problems in the layout. The biggest feature of the BFC is that each BFC area is independent of each other.
5.1 Solve the margin merge problem
5.11 Merge margins
Margin merge occurs when two vertically aligned block-level elements are set to margin-bottom for the upper box and margin-top for the lower box. Margin merge occurs when the two values are equal, and the larger value occurs when the two values are different.
<head>
<meta charset="utf-8" />
<title>Margin merge</title>
<style>* {margin:0 auto;
padding:0
}
.box{
width:100px;
height:100px;
background-color:pink;
margin-bottom:100px;
}
.box:last-of-type{
background-color:aquamarine;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
Copy the code
5.12 Solution
Place the two divs in different BFC’s so that their contents do not interfere with each other, wrap the two BFC’s in two containers, and use Overflow: Hidden to trigger the CONTAINER’s BFC.
<head>
<meta charset="utf-8" />
<title>Margin merge problem resolved</title>
<style>* {margin:0 auto;
padding:0
}
.box{
width:100px;
height:100px;
background-color:pink;
margin-bottom:100px;
}
.container:last-of-type .box{
background-color:aquamarine;
margin-top:100px;
}
.container{
overflow:hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
</div>
</body>
Copy the code
5.2 Solve the problem of margin collapse
Margin collapse
When two nested block-level elements set an upward margin for the child, the parent element falls down, creating a margin collapse.
<head>
<meta charset="utf-8" />
<title>Edge collapse</title>
<style>* {margin:0;
padding:0
}
.father{
width:300px;
height:200px;
background-color:aquamarine;
}
.son{
width:100px;
height:100px;
background-color:pink;
margin-top:100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
5.22 Solution
- Give the parent element a 1 pixel inner margin or outer border
- Turn on the BFC for the parent element
<head>
<meta charset="utf-8" />
<title>Margin collapse problem solved</title>
<style>* {margin:0;
padding:0
}
.father{
width:300px;
height:200px;
/* Sets the parent element to a 1 pixel inner margin or outer border */
border-top:1px solid transparent;
/* Enable BFC */ for the parent element
/* overflow: hidden; * /
background-color:aquamarine;
}
.son{
width:100px;
height:100px;
background-color:pink;
margin-top:100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
5.3 Clearing floats
Let’s start with an example where the parent wraps the child element, and when we set the float, the child element leaves the document flow and the parent element has height zero.
<head>
<meta charset="utf-8" />
<title>Clear element float</title>
<style>* {margin:0;
padding:0
}
.father{
background-color:aquamarine;
}
.son{
width:100px;
height:100px;
background-color:pink;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the code
When the BFC is triggered by the overflow property, the parent element wraps the child element, clearing the float.
.father{
background-color:aquamarine;
overflow:hidden;
}
Copy the code
5.4 Prevent elements from being overwritten by floating elements
When the left box is set to float, the float element overwrites the element that did not float.
<head>
<meta charset="utf-8" />
<title>Prevents elements from being overwritten by floating elements</title>
<style>* {margin:0;
padding:0
}
.floatDiv{
width:100px;
height:200px;
background-color:aquamarine;
float:left;
}
.normalDiv{
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div class="floatDiv">1</div>
<div class="normalDiv">233333332</div>
</body>
Copy the code
.normalDiv{
overflow: hidden;
}
Copy the code
conclusion
This article ends here, because my experience level is limited, unavoidably will have the flaw, welcome to correct this. Writing is not easy, behind the continuous output is the accumulation of countless days and nights, your praise is the power of continuous writing, thank you for your support.