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高度图片就把盒子撑开了，因为背景颜色显现了。

那么看好了此时给图片一个浮动 float: left;

现在背景颜色没了，box的高度也没了完了芭比Q了~

前后来对比一下！

为甚会这样，因为浮动的元素脱落标准文档流（就是我们所说的托标了，不会有人忘记了HTML的知识了吧），浮在了普通文档流之上了。

那么怎么让box形成BFC呢? 很简单看形成条件呗，也加 overflow: hidden;

加上之后就和最初是一样的,box有高度也被撑开也就变成了BFC

变成了BFC有什么特性呢？现在来一起看 形成BFC的特性第六条：

6、计算 BFC 的高度时，浮动元素也参与计算

box形成了BFC，img浮动参与计算，没有给box高度，img参与计算box就被撑开了。

那么接着再来

我们在加一个p标签

如果按最开始的布局应该这样：

那么图片有浮动是这样：

那么有时候我们因为布局不想让p标签在图片下面怎么办呢？

很简单给p加overflow: hidden; 呗！ 还真是好用吼~

那么接着回去看形成BFC的特性第四条：

4、BFC 的区域不会与 float box 重叠

p标签形成了BFC独立区域就不与浮动的img重叠，很好理解嘛.

HTML标签符合了一些条件或者特性就形成了BFC

所以这么多条件有一个就能形成BFC，并不是需要都具备所有的条件，哦~搜嘎~这不就懂了嘛！

这么多特性就不一一举例了，形成条件多记一两个够用了

接下来有精力的人可以去尝试理解一下第三条形成BFC的特性

结尾总结一下：

相信讲到这里大家应该就理解了到底什么是BFC了，其实bfc就是一个独立的渲染区域、一个抽象的概念，并不是什么标签，什么css样式。最初我看到这个概念也是不理解。学习之后才明白原来前面学的知识里早就出现了BFC ，一直陪在我们身边了，只是近些年推出了这个概念。

好的，今天就暂时分享到这里。

希望这篇文章能帮助到大家，让你能很好很简单的理解到底什么是BFC。