5分钟理解BFC 块级格式化上下文

BFC是什么

BFC(Block formatting context)直译为"块级格式化上下文"。浮动元素和绝对定位元素、非块级盒子的块级容器、overflow为非‘visiable’的块级盒子，都会为他们的内容创建新的BFC.

可以简单理解为一个块独立的作用域，拥有这个作用域的盒子有自己的特性。在我们了解有哪些特性之前先来了解如何产生BFC。

如何产生BFC

以下几种方式都可以让布局容器创建BFC：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或inline-flex
4、overflow的值不是visible

换言之，拥有以下任意一种样式的容器都会创建BFC：

// 浮动元素
float: left;
float: right;

// 绝对定位元素
position: fixed;
position: absolute;

// 非块级盒子的块级容器
display: inline-block;
display: table-cell;
display: flex;
display: table-caption;
display: inline-flex;

// overflow为非‘visiable’的块级盒子
overflow: hidden;
overflow: scroll;
overflow: auto;

BFC有哪些特点

根元素会默认创建BFC

创建了BFC的元素不会与浮动元素重叠
把上面的例子的box2也创建为BFC，那么box1和box2将不会重叠

<style>
    .parent {
      /* 父盒子设置overflow: hidden; 后创建BFC */
      overflow: hidden;
      background-color: greenyellow;
    }
    .parent > .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* box1子盒子设置float: left;后创建BFC */
      float: left;
    }
    .parent > .box2 {
      width: 50px;
      height: 50px;
      background-color: gold;
      /* box2子盒子设置float: left;后创建BFC，设置float或overflow都可以 */
      /* float: left; */
      overflow: hidden;
    }
  </style>

创建BFC元素不与浮动元素重叠

当布局盒子（容器）有足够的空间容纳创建BFC的子盒子时，会把创建BFC的子盒子放在浮动盒子的后面，占据剩余空间
上述的案例中如果父盒子parent设置宽度为120px，剩余的20px不够放置box2，box2就会被挤到下一行
计算创建了BFC的元素的高度时会计算浮动元素
此特性可用于清除浮动，清除浮动常用方法参照我的另一篇文章：
了解详细的清除浮动方法
创建了BFC的元素不会和在流中的子元素发生外margin重叠现象
标准流外margin折叠：

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

<style>
    .parent {
      background-color: greenyellow;
    }
    .parent > .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-bottom: 50px;
    }
    .parent > .box2 {
      background-color: gold;
      width: 50px;
      height: 50px;
      margin-top: 50px;
    }
  </style>

外margin折叠

利用BFC解决外margin折叠问题：给需要设置外margin的元素都包裹一层BFC，具体方法如下：

<div class="parent">
    <div class="bfc">
      <div class="box1"></div>
    </div>
    <div class="bfc">
      <div class="box2"></div>
    </div>
  </div>

<style>
    .parent {
      background-color: greenyellow;
    }
    /* 包裹一层BFC */
    .parent > .bfc {
      overflow: hidden;
    }
    .parent > .bfc > .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-bottom: 50px;
    }
    .parent > .bfc > .box2 {
      background-color: gold;
      width: 50px;
      height: 50px;
      margin-top: 50px;
    }
  </style>

解决外margin重叠问题

文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢

最后编辑于：2020.07.01 11:12:26