使用Jenkins部署前端项目

在普通的前端开发中我们会遇到BFC相关的问题，但是我们可能不知道该问题和BFC相关。

首先相信我们在前端开发中都有遇到下面的情况：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
    <title>表单</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        width: 100vw;
        height: 100vh;
        background-color: grey;
      }

      /* 这里本意是让标题距container顶部有20px的距离 */
      .title {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2 class="title">这是标题</h2>
    </div>
  </body>
</html>

最后我们运行一下看结果：

image-20210304230214387

可以看到，title和container之间并没有被撑开，反而是container和body之间被撑开了。

最简单的解决方法就是给.container添加overflow: hidden;属性：

.container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: grey;
}

再次刷新界面，你会发现已经和你预想的结果一样了：

image-20210304230433798

究竟是什么原因导致出现了这种结果，这就是我们今天需要讲到的BFC，可能听到这个名词或者看到这个名字大部分时间都是在面试题中，面试题就喜欢考这些概念上的问题。

那么到底BFC是什么呢？

BFC定义

其实上面那并不是CSS的BUG，这是名为BFC的东西，即Block formatting context直译为”块级格式化上下文”。