最近了解了一下前端面试题，发现有一个名词经常出现，那就是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。