BFC、IFC、GFC 和 FFC

前言

想要了解BFC、IFC、GFC、FFC，就必须先要了解FC。

FC的全称是：Formatting Contexts（格式化上下文），它是W3C规范中的一个概念。简单来说，它是页面中的一块渲染区域，并且有自己的一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。需要注意的是，它并不会影响区域外的元素

前置概念

先让我们了解几个基本概念

1、Box

简单来说，我们的web页面是由一个个Box组合而成的，而display等属性决定了Box的类型

1）block-level Box

当元素的 CSS 属性 display 为 block, list-item 或table 时，它是块级元素 block-level。块级元素（比如<p>)视觉上呈现为块，竖直排列。每个块级元素至少生成一个块级盒（block-level Box）参与 BFC ，称为主要块级盒(principal block-level box)。一些元素，比如<li>，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。

2）Inline-level Box

当元素的 CSS 属性 display 的计算值为inline,inline-block 或inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本或图片，都是行内级元素。行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文 IFC 。

3）flex container

当元素的 CSS 属性 display 的计算值为 flex 或 inline-flex ，称它为弹性容器。display:flex这个值会导致一个元素生成一个块级（block-level）弹性容器框。display:inline-flex这个值会导致一个元素生成一个行内级（inline-level）弹性容器框。

4）grid container*

**当元素的 CSS 属性 display 的计算值为 grid 或inline-grid，称它为*栅格容器。

2、块容器盒（block container box）

只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，只包含行内盒的叫做块容器盒子。

也就是说，块容器盒要么只包含行内级盒，要么只包含块级盒。

块级盒（block-level Box）是描述元素跟它的父元素与兄弟元素之间的表现。

块容器盒（block container box）描述元素跟它的后代之间的影响。

3、块盒（BLock Boxes）

同时是块容器盒的块级盒称为块盒(block boxes)

4、行盒(Line boxes)

行盒由行内格式化上下文(inline formatting context)产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。

OK，了解完上面这些概念，我们再来看我们本篇文章的重点内容（终于要揭开各种FC的庐山真面目了，期待～）

BFC（Block Formatting Contexts）块级格式化上下文

在MDN上是这样解释的，块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

1、如何创建BFC：

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

2、BFC的规则

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

3、BFC的应用场景

1）解决块级元素垂直方向margin重叠

原因：外边距合并，当2个垂直外边距相遇时，他们将形成一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。

2）解决高度塌陷问题

3）清除浮动

4）左侧固定栏，右侧自适应栏

IFC（Inline Formatting Contexts）行内级格式化上下文

这是MDN上的解释：

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列
对于垂直书写模式，各个框从顶部开始水平地排列

1、如何创建IFC

块级元素中仅包含内联级别元素，形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

2、IFC布局规则

在一个IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。

子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。

在垂直方向上，子元素会以不同形式来对齐（vertical-align）

能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。

IFC中的line box一般左右边贴紧其包含块，但float元素会优先排列。

IFC中的line box高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。

当 inline boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。

当一个inline box超过父元素的宽度时，它会被分割成多个boxes，这些boxes分布在多个line box中。如果子元素未设置强制换行的情况下，inline box将不可被分割，将会溢出父元素。

3、IFC应用场景

1）元素水平居中

当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

2）多行文本水平垂直居中

创建一个IFC，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（Grid Formatting Contexts）栅格格式化上下文

当为一个元素设置display值为grid或者为inline-grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器grid container上定义网格定义行grid definition rows和网格定义列grid definition columns属性各在网格项目grid item上定义网格行grid row和网格列grid columns为每一个网格项目grid item定义位置和空间。

1、GFC布局规则

通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间（具体可以在MDN上查看）

2、GFC应用场景

1）网格布局

FFC（Flex Formatting Contexts）弹性格式化上下文

flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)

1、如何触发FFC

当 display 的值为 flex 或 inline-flex 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）

2、FFC布局规则

设置为 flex 的容器被渲染为一个块级元素
设置为 inline-flex 的容器被渲染为一个行内元素
弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局

**⚠️注意：**FFC布局中，float、clear、vertical-align属性不会生效。

3、FFC应用场景

1）弹性布局

学前端的你了解这些知识吗？——BFC、IFC、GFC、FFC相关推荐

web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...
从零开始学前端 - 1. HTML基础知识
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
【笔记】重学前端-winter
本文为:winter 发布在极客时间 [重学前端]系列课程的的笔记和总结支持正版哦: https://time.geekbang.org/col... 导语如果深入进去了解,你会发现,表面上看他们 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
现在学前端还来得及吗？总听人说饱和了
"前端已经饱和了,现在学前端没有前途了" 每次听到这种论调我都气不打一处来.自己技艺不精,然后就说市场饱和了. 是,现在的确不是那个会切个图,懂点html+CSS就能找到工作的年代 ...
重学前端学习笔记（八）--JavaScript中的原型和类
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（二十二）--选择器的机制
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...

学前端的你了解这些知识吗？——BFC、IFC、GFC、FFC