# BFC是什么

想必多多少少作为一个前端开发者怎么说对这个词并不陌生，可是当你深入去解释它的时候却显得那么苍白无力那么BFC到底什么

# BFC：（Block Formatting Context）

官方解释：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译过来：块级格式化上下文或块级格式区域，块级格式区域包含创建它的元素内部的所有内容，但不包含创建新块级格式区域的子元素内部的所有内容

<div class="box1" id="BFC1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4" id="BFC2">
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</div>

1
2
3
4
5
6
7
8

解释:

当BFC1为一块BFC区域时，这块区域包含box2、box3、box4，他们是BFC1的子元素而当BFC2也是一块BFC区域时，他包含box5、box6

总结:

每一个BFC区域只包括其子元素，不包括其子元素的子元素。
每一个BFC区域都是独立隔绝的,互不影响
一个元素不能同时存在于多个BFC中

# 怎么生成一个BFC区域？

根元素（html）,或包含body的元素
设置浮动（float），且值不为none（为 left、right），
设置定位（position）, 不为static或relative（为 absolute 、 fixed）
设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
设置 overflow，且值不为visible (为 auto、scroll、hidden) 满足以上条件之一的即可形成BFC区域

# BFC有哪些特性？

属于同一个BFC的两个相邻容器的上下margin可能会重叠
计算BFC高度时浮动元素也会被计算
BFC的区域不会与浮动容器发生重叠
所有属于BFC中的盒子默认左对齐，并且它们的左边距可以触及到容器的左边线。最后一个盒子，尽管是浮动的，但依然遵循这个原则
BFC是独立容器，容器内部元素不会影响容器外部元素

# 根据BFC的特性，我们可以解决哪些问题？

1.根据特性1解决外边距的塌陷问题: 页面效果详见 (opens new window) 当两个盒子设置100的外边距，会发现应该200px的外边距发生了塌陷，margin重叠只有100px

.box {
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: aqua;
  margin-bottom: 100px;
}
.box2 {
  background-color: #ecad9e;
  margin-top: 100px;
}

1
2
3
4
5
6
7
8
9
10
11
12

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
  </body>

1
2
3
4

解决这个问题，将两个盒子放在不同的BFC中即可，

方法一：

我们可以将其中一个元素设置成BFC区域，这里为box1包裹一层div设置overflow：hidden使其成为BFC区域，使box1，box2成为两个独立容器互不影响

<div style="overflow: hidden">
  <div class="box box1"></div>
</div>

1
2
3

方法二：给其中一个元素设置display：inline-block，同样可以使其成为BFC区域

.box2 {
  background-color: #ecad9e;
  margin-top: 100px;
  display: inline-block;
}

1
2
3
4
5

根据特性2解决父元素高度塌陷问题:

页面效果 (opens new window)

<div class="parent">
  <div class="child"></div>
</div>

1
2
3

.parent {
  border: solid #ccc 1px;
}
.child {
  width: 100px;
  height: 100px;
  background-color: #f99;
  float: left;
}

1
2
3
4
5
6
7
8
9

解决这个问题，将父元素设置为BFC区域即可方案一

.parent {
  border: solid #ccc 1px;
  overflow: hidden;
}

1
2
3
4

BFC浮动重叠问题:

页面效果 (opens new window)

.left {
  width: 100px;
  height: 100px;
  background-color: aqua;
  float: left;
}
.right {
  height: 200px;
  background-color: burlywood;
}

1
2
3
4
5
6
7
8
9
10

<div class="left"></div>
<div class="right"></div>

1
2

解决浮动重叠，实现自适应两栏效果，使 .right 成为 BFC区域即可

.right {
  height: 200px;
  background-color: burlywood;
  overflow: hidden;
}

1
2
3
4
5

# 补充

利用BFC解决父子级外边距合并的方法很多，相对应的也会带来一些影响。例如：

inline-block会导致改变元素形式，可能会有收缩，缝隙等情况。设置float，会让元素产生浮动绝对定位会导致脱离文档流（注意只有absolute，和fixed有效，relative不会产生效果）

...... 相对影响较小的方法是overflow:hidden,和overflow:auto，但是在对应的场景下还会产生影响，例如需要下拉菜单时，就不应该设置overflow:hidden 针对不同的应用场景需要具体问题具体分析，选择最适合的方法解决

← 介绍 margin重叠 →