浅谈格式化上下文

本文是我在学习CSS的bfc过程中进行的总结归纳。如果你发现文章存在错误，请务必向我联系，以免误导更多的读者，谢谢。

---

格式化上下文( formatting contexts )
├── 块级格式化上下文( Block formatting contexts )( BFC )
├── 行内格式化上下文( Inline formatting contexts ) ( IFC )
├── 自适应格式化上下文( Flex Formatting Contexts )( FFC )
└── 网格布局格式化上下文( GridLayout Formatting Contexts )( GFC )

格式化上下文( formatting contexts )

其实要搞懂格式化上下文( FC ),重点不在于记着哪几个条件能创建新的FC，而在于FC是用来干嘛的。
知乎上winter有一个回答说得很不错，可惜他删掉答案了，原话如下：

如何理解块级格式化上下文BFC?
首先我觉得应该改改翻译，formatting在印刷业主要就是排版的意思，它只有在计算机行业，宾语是磁盘的时候才应该翻译成格式化。在css里面，应该取排版的原意。另外我觉得谈BFC，一定要和IFC一起讲，类似的东西还有FFC、table以及Grid。其实BFC不是知识点，它只是一个概念，这块知识应该是visual formatting，其实就是css的排版系统，如果你纠结于BFC这个概念，不去理解normal flow、block/inline level、block container、replaced element等等这些相关的概念，以及css排版的策略，你就永远没法真正理解BFC，你就永远只能死记硬背overflow不为visible就会触发BFC这样的话。

这里他提出formatting有排版的意思，无论这个翻译你是否接受，不能否认的是他向我们提出了新的观点。既然formatting在印刷中的代表排版，类比思考一下，FC在css中可否理解成布局环境的意思。或者说，如果我需要一个新的布局环境，该环境内、外元素互不干扰，这时候我们就通过引入bfc等来完成这操作。当然，我们一般还是将FC写成格式化上下文比较规范，便于交流。

---

在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。

上文提到：所有的框都属于一种格式化上下文，所有的元素都划分到一种格式化上下文中被初始化。
但你是否思考过以下问题：有没有元素不属于任何一种格式化上下文？

，毫无疑问的是，内层的div被外层div创建的bfc中被初始化，那么，

，这两个在普通流中的框，被谁创建的bfc初始化？这看上去框就是纯粹的在普通流中，没被任何bfc初始化。
这时候你就想想哪些元素会生成bfc？其中一个就是根元素。什么是根元素( 那里面的几个答案都值得看 )，一般指的是顶层的html元素，那就是说上文那两个div都是在根元素创建的bfc下被渲染的，他们都存在于html的bfc中。注意，他们都存在于同一个bfc中，所以，所有的元素都属于（在）一种格式化上下文中。这事还没完，回到经典的父框没被浮动的子框撑起来例子。

`

`

看过 BFC产生条件及布局规则，你是否会疑惑：既然外层div在bfc中，浮动元素又创建了bfc，那么根据BFC布局规则最后一条，为何浮动元素没计算进外层div高度？
这个问题的目的是让你区分，“在bfc”跟“创建bfc”的区别。外层div是在html创建的bfc中，但它自己没创建bfc，浮动元素才创建了bfc。所以，外层div根本不是bfc，只不过它是在bfc的环境中被初始化。所以外层div不是bfc，计算高度不是按照bfc的方法来计算。给html加上border就能更好理解。因为html作为根元素，它产生了bfc环境，我们说它就是一个bfc，它是bfc，就按bfc的方法计算高度，里面的浮动元素也参与计算，所以就被撑起来了。

html{border:5px solid red;}

搞清楚bfc的原理后，也知道了为什么父元素撑不起浮动子元素，归根结底，如果父元素要撑起里面的后代元素，必须是该父元素自己声明了bfc，让后代元素在父元素创建的容器中。

---

第一次写这种技术文，可能行文有点乱，希望能帮助到有需要的人。最后，非常感谢那些付出自己知识的大神们，希望你在浏览的同时感谢他们的贡献的贡献。
[1] BFC 神奇背后的原理
[2] BFC是什么
[3] CSS定位机制之一:普通流
[4] 根元素
[5] 常规流
[6] normal-flow