☀️BFC是什么？如何触发？有什么应用场景？

Posted 2021-08-30 °PJ想做前端攻城狮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了☀️BFC是什么？如何触发？有什么应用场景？相关的知识，希望对你有一定的参考价值。

面试官：说一说BFC吧

我：??那是啥…💥

BFC是什么

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

触发条件

一个html元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文：

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

BFC渲染规则

BFC垂直方向边距重叠
BFC的区域不会与浮动元素的box重叠
BFC是一个独立的容器，外面的元素不会影响里面的元素
计算BFC高度的时候浮动元素也会参与计算

应用

防止浮动导致父元素高度塌陷（清除浮动）

--css
<style>
      .container {
        border: 10px solid red;
      }
      .inner {
        background: #08BDEB;
        height: 100px;
        width: 100px;
      }
    </style>
--html
 <body>
    <div class="container">
      <div class="inner"></div>
    </div>
  </body>

接下来将inner元素设为浮动:

  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

会产生这样的塌陷效果：

但如果我们对父元素设置BFC后, 这样的问题就解决了

.container {
    border: 10px solid red;
    overflow: hidden;
}

同时是清除浮动的一种方式。

避免外边距折叠

两个块在同一个BFC内，会造成外边距折叠。

 --css
 .container {
      background-color: green;
      overflow: hidden;
    }

    .inner {
      background-color: lightblue;
      margin: 10px 0;
    }
  </style>
  --html
  <body>
  <div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>

此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。现在我们做如下操作: