BFC是什么？简单易懂，个人总结，一篇文章让你理解掌握BFC

最近了解了一下前端面试题，发现有一个名词经常出现，那就是BFC

BFC是什么呢？

我们好像感觉这是新出的什么东西吗？怎么突然就闯入我们的世界了？

实则不然，其实呢 BFC 在前端随处可见，只要你有过接触，接触过前端，写过静态网页就已经和它打交道了。

接下来我们一起来看看 BFC是怎么定义的。

定义：

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

什么巴拉巴拉一堆，也看不懂。那我们取出来当中有用的部分：

它是一个独立的渲染区域,其实就是符合某些特征的HTML标签。

记住这句话并且理解这句话应该就懂得到底什么是BFC了。

接下来BFC有两条重要的内容：

一、布局规则：

也就是形成BFC的特性 会怎么怎么样？。。。

1、内部的 Box 会在垂直方向，一个接一个地放置

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠
3、每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往
右的格式化，否则相反)。即使存在浮动也是如此
4、BFC 的区域不会与 float box 重叠
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反
之也如此
6、计算 BFC 的高度时，浮动元素也参与计算

二、哪些元素会生成 BFC:

也就是形成BFC的条件。 需要谁谁谁？。。。

1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不为 visible

想理解BFC, 首先我们先看布局规则前两条:

1、内部的 Box 会在垂直方向，一个接一个地放置

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠

第一条就很好理解，就拿最简单的例子来说明：标准流布局

正如第一条：标准流布局的盒子会上下排列，独占一行。

而第二条的前半句就是margin可以挤开盒子与盒子直接的距离。

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标准流布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      width: 1200px;
      margin: 20px auto;
    }
    body {
      text-align: center;
    }
    header {
      height: 100px;
      background-color: pink;
    }
    .nav {
      height: 50px;
      background-color: skyblue;
    }
    .main {
      height: 200px;
      background-color: purple;
    }
    footer {
      height: 150px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <header>header</header>
  <nav class="nav container">nav</nav>
  <main class="main container">main</main>
  <footer>footer</footer>
</body>
</html>

后半句就是外边距塌陷问题

怎么理解呢? 大盒子里面套个小盒子，再给定了margin值 此时就会出现第二条后半句的情况

比如下面情况：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距塌陷</title>
  <style>
    body {
      background-color: #ccc;
    }

    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 100px;
      overflow: hidden;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 大盒子套小盒子嘛！ -->
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

正常布局，当我们给了父盒子一个margin-top的值，自然会顶着上面往下走100px，

但此时我们也想让子盒子在父盒子里面往下走50px，给定子盒子margin-top值并不能实现。

这就是外边距塌陷，也是第二条后半句属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠，这也就没有形成BFC,

那我还是想让子盒子也在父盒子往下走个50px怎么办呢？，那么回去看看形成BFC的条件第五条：5、overflow 不为 visible

给父元素 overflow: hidden; 呗！

效果实现。总结一下：

此时这个大的父盒子就形成了BFC,回顾概念它是一个独立的渲染区域。

提重点 它是 独立区域如果这是小学的缩句独立都要剔除。回头读读形成BFC的特性第五条应该也能理解

这样就初步地理解了BFC是什么。

再举个栗子：

搞张图片，丢进一个盒子里：

  <style>
    .box {
      background-color: #ddd;
    }

    .box img {
      /* 图片太大刺眼，限制一下大小 */
      height: 200px;
    }
  </style>  


  <div class="box">
    <img src="./屌图.jpeg" alt="">
  </div>

快看，并没有给box高度图片就把盒子撑开了，因为背景颜色显现了。