CSS 格式化上下文（BFC，IFC，FFC和GFC）基本介绍

本文主要是介绍CSS 格式化上下文（BFC，IFC，FFC和GFC）基本介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

格式化上下文

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

格式化上下文（Formatting context）是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

截至目前已发布的CSS3规范，格式化上下文主要包括四种类型：

Block fomatting context (块级格式化上下文，简称BFC)

Inline formatting context (内联级格式上下文，简称IFC)

Flexible Formatting Contex（弹性盒格式化上下文，简称FFC）

Grids Formatting Context(网格格式化上下文，简称GFC)

1. BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（display 属性为 block, list-item, table 的元素）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。这是BFC最核心的特点

1.1 BFC规则特点

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

1.2 创建BFC的方法

html根元素;
float 的值不为 none;
overflow 的值不为visible；
display 的值为 table-cell、table-caption , inline-block ,flex, inline-flex,grid,inline-grid中的任何一个；
position 的值不为 relative 和 static。

1.3 BFC应用场景

（1）防止垂直方向margin重叠

块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，如下图示例：

<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p><p>Hehe</p>
</body>

在这里插入图片描述
根据上面介绍BFC的规则特点，我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了：

<style>.wrap {overflow: hidden;}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p><div class="wrap"><p>Hehe</p></div>
</body>

在这里插入图片描述

（2）创建自适应两栏布局
在这里插入图片描述

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

由于float脱离文档流的，.main和,aside元素存在重叠部分。根据BFC不会与float box重叠以及每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此的规则特点，我们让.main成为一个BFC：

.main {overflow: hidden;
}

在这里插入图片描述
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度变化，自动变宽或变窄（当main没有设置固定尺寸时）。这就是一种自适应两栏布局

（3）清除浮动（解决浮动元素父元素高度塌陷）

<style>.par {border: 5px solid #fcc;width: 300px;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

在这里插入图片描述
我们在使用浮动时，如果浮动元素的父元素没有指定高度，会造成父级元素高度塌陷

由于计算BFC的高度时，浮动元素也参与计算。所以创建BFC即可达到清除浮动，避免父元素高度塌陷的效果

.par {overflow: hidden;
}

在这里插入图片描述

2. IFC

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

IFC布局规则：

在一个行内格式化上下文中，盒是一个接一个水平放置
这些盒之间的水平margin，border和padding都有效
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
行内块级元素之间默认留有间隙
矩形区域包含着来自一行的盒子叫做line box，line box的宽度由浮动情况和它的包含块决定，高度由line-height的计算结果决定

3. FFC

FFC全称：Flexible Formatting Context弹性盒格式化上下文

CSS3引入了一种新的布局模型——flex布局。

flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flexbox布局实际上就是声明创建了FFC(自适应格式上下文)