十分钟让你搞懂BFC IFC GFC FFC

什么是Formatting context(格式上下文)?

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

Box：css的基本单位
Box 是css的布局的基本单位，一个页面可以看作是由很多个box组成的。不同类型的box,会参与不同的Formatting context(一个决定如果渲染文档容器)，因此Box内的元素会以不同的形式渲染。

Formatting context的种类：

Block formatting context(BFC): 块级格式化上下文
inline formatting context(IFC): 行内格式化上下文
Flex formatting context(FFC): css3中的flex布局
Grid formatting context(GFC): css3中的Grid布局

BFC

哪些元素会生成BFC?

• 根元素body
• float属性不为none
• position为absolute或者fixed
• display为inline-block,table-cell,table-caption,flex,inline-flex
• overflow不为visible（即：hidden、auto、scroll）(常用)
  最后，一般设置BFC最常用的就是给盒子加上 overflow: hidden; 因为这样的写法基本上不会对原有的其他样式产生影响。

BFC的特性规则：

（1）、BFC内部的盒子是从上到下一个接着一个排列的（正常的块级元素排列也是如此）
（2）、BFC内部的盒子之间的距离是通过margin值来设置的，相邻的两个盒子的margin会重叠，那么如果不属于同一个BFC则可以解决这个问题
（3）、BFC盒子内部的子盒子是紧贴着BFC盒子的边缘的（从左到右排列，则子盒子的左边缘紧贴着BFC的左边框（不与边框重叠）；从右到左排列，则子盒子的右边缘紧贴着BFC盒子的右边框）
（4）、BFC盒子不会与浮动的盒子产生重叠，而是紧靠着浮动的边缘
（5）、计算BFC的高度时，也会自动计算浮动或定位的盒子的高度

工作中常用到的BFC

1. 清除内部浮动，父容器内容由子容器撑开

处理：

.par {
    overflow: hidden;
 }

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

为达到清除内部浮动，我们可以触发par生成BFC，那么par 在计算高度时，par内部的浮动元素child也会参与计算

2. 消除margin双边距问题

 
    
Haha
    
Hehe
 

效果

Box垂直方向的距离由margin决定。属于同一个BFC（body为根元素BFC）的两个相邻box的margin会发生重叠

处理：

 
    
Haha
      
Hehe
    

我们可以在p的外面包裹一层容器，并出发该容器生成一个BFC,那么两个p便不属于同一个BFC,就不会发生margin重叠了，
使用display:inline-block;也是同样的道理，触发了BFC

3. 自适应两栏布局：

显示：

BFC的区域不会与float box重叠，两个BFC布局之间互不影响，不会发生重叠：

.main {
    overflow: hidden;
 }

通过触发main生成BFC， 来实现自适应两栏布局。

IFC

IFC的line box（线框）高度由其包含行内元素中高的实际高度计算而来（不 受到竖直方向的padding/margin影响)
FFC

FFC

display值 为flex或者inline-flex的元素将会生成自适应容器（flex container），

GFC

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