A very important part of CSS is the BFC block-level formatting context. This article organizes the relevant knowledge of CSS BFC. It is recommended to eat after bathing and dressing.
Before formally explaining BFC, let's first understand the problem of overlapping browser margins.
Margins overlap
MDN : A block's top margin (margin-top) and bottom margin (margin-bottom) are sometimes merged (collapsed) into a single margin whose size is the maximum of the single margin (or if they are equal, only among them a), this behavior is called margin collapsing . Note : Margin overlap occurs in block-level elements, and elements with float and position=absolute will not produce margin overlap behavior.
There are three situations in which margins overlap:
- Between adjacent elements on the same level : The margins between two adjacent elements overlap. The margin of box1 and box2 is 200px
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.box1{
margin-bottom: 100px;
}
.box2{
margin-top: 200px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码- **No content separates parent and descendant elements:** If there is no border, padding, inline content, and no block-level formatting context is created, the parent block element and its descendant block elements will overlap the outer border. The overlapping portion will eventually overflow outside the parent block element . As follows: the wrapper has a top margin of 100px, and there is no top margin of 100px between the box and the wrapper.
<style>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
}
.box{
width: 100px;
height: 100px;
margin-top: 100px;
background-color: powderblue;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码- **Empty block-level element:** In the example below, there is a 200px distance between content 1 and content 2.
<style>
div {
margin-top: 100px;
margin-bottom: 200px;
}
</style>
<p>内容1</p>
<div></div>
<p>内容2</p>
复制代码formatting context
Inline formatting context
The inline boxes are arranged one after the other in the order determined by the writing mode setting:
- For horizontal writing mode, the boxes are arranged horizontally from the left
- For vertical writing mode, the boxes are arranged horizontally from the top
.horizontal {
writing-mode: horizontal-tb; // 从左开始
}
.vertical {
writing-mode: vertical-rl; // 从上开始
}
复制代码block formatting context
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。形成独立的渲染区域，内部元素的渲染不会影响外界。
总结来说具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC的条件「常见」
- 根元素（）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block、table-cells、flex）
- overflow 值不为 visible 的块元素 (hidden、auto、scroll)
BFC的特性
- BFC是独立容器，容器内部元素不会影响容器外部元素。
- 计算BFC的高度时，浮动元素也参与计算。
- BFC的区域不会与float的元素区域重叠。
注意：很多博客都会将属于同一个BFC的两个相邻盒子的margin会发生重叠认为是BFC的特性，不是！不是！没有触发 BFC 也是如此排列的。BFC 可以解决这种重叠，但对于margin重叠，我们通常不解决，合理利用就好了。
BFC的常用案例：
1、解决 margin 重叠
- 相邻子元素的重叠
内部的盒子会在垂直方向上一个接一个的放置，垂直方向上的距离由margin决定。BFC可以避免margin折叠，例子：
<style>
.wrapper{
border: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background-color: #999;
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
</style>
<div class="wrapper">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
复制代码如下图，在普通文档流中，两个相邻容器的上下margin会重叠，并且取其最大的margin。
如果让其中一个盒子处于独立的BFC中，就不会重叠。如下图
<style>
.wrapper{
border: 1px solid black;
}
.wrapper2{
overflow: hidden;
}
.box {
width: 200px;
height: 200px;
background-color: #999;
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
</style>
<div class="wrapper">
<div class="wrapper2">
<div class="box1 box"></div>
</div>
<div class="box2 box"></div>
</div>
复制代码- 父子元素的margin重叠
<style>
.wrapper{
width: 200px;
height: 200px;
background: powderblue;
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
margin-top: 100px;
background: pink;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码Figure 1 below shows that the margin-top of the box overflows to the parent element without triggering the BFC. Figure 2 below shows that the BFC is triggered, and the internal elements will not affect the external.
2. Spread the height of the float parent element
When calculating the height of the BFC, floating elements also participate in the calculation. You can use this to stretch the parent element.
<style>
.wrapper{
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
background: pink;
float: left;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码Because the float will break away from the normal flow and form a floating flow, the parent height will not be stretched by the child elements. As shown below
When the BFC is triggered, the float element counts into the calculation of the height.
<style>
.wrapper{
border: 1px solid black;
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background: pink;
float: left;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码3, can clear the floating
The BFC's area does not overlap the float's element area. So can be used to clear the float
<style>
.box1{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: powderblue;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码The result is as shown in the figure below. As you can see, box2 will overlap with box1.
When we trigger the BFC, we can see the image below, which does not overlap with the float
<style>
.box1{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码4. Implement two-column and three-column layouts
- The BFC's area does not overlap the float's element area. This feature also enables two-column layouts. Set a fixed width for fixed columns and enable BFC for non-fixed columns.
<style>
.left{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.right{
height: 100px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
复制代码- The three-column layout is the same, the left and right are fixed, and the middle is not fixed. It should be noted that the div in the middle part of the center should be placed behind the left and right.
<style>
.left {
width: 100px;
height: 100px;
float: left;
background: #ffc0cb;
}
.right {
width: 100px;
height: 100px;
float: right;
background: #ffc0cb;
}
.center{
height: 100px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
复制代码5. Prevent float text wrapping.
It's useless, but it's a use.
<style>
.left {
width: 100px;
height: 100px;
background: #ffc0cb;
float: left;
}
p{
width: 200px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<p>
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
</p>
复制代码We often use float to achieve the newspaper effect of text wrapping, but if you don't want to wrap... you can trigger the BFC implementation
I hope it is useful to you, remember to like and follow~