学习理解BFC、IFC、GFC、FFC

一、盒子模型

要理解BFC与IFC，首先要理解盒子模型，盒模型的结构如下：

从内到外依次为  content -> padding -> border -> margin

 

常见的盒模型氛围两种：标准盒模型和IE盒模型，我们可以用 box-sizing 属性进行切换

标准盒模型：  box-sizing: content-box;

IE盒模型：box-sizing: border-box;

二、BFC和IFC

1.简要概括

• Block level的box会参与形成BFC：例如display值为block/ list-item/ table
• Inline level的box会参与形成IFC：比如 display值为inline/ inline-table/ inline-block

2.FC(Formatting Context)

格式化上下文。定义的是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

3.解释

BFC(Block Formatting Contexts) 块级格式化上下文

块级格式化上下文是页面上的一块渲染区域，这块区域由符合条件的容器产生。容器内的子元素会由块盒子和浮动元素按如下规则排列：

• 纵向一个挨着一个排列
• 两个盒子的纵向间距由margin属性决定，两个相邻的盒子在垂直方向上的margin会有种“重叠合并”的效果，此时纵向间距距离取较大的那个margin值

IFC(Inline Formatting Contexts)行内格式化上下文

行内格式化上下文的布局首先要根据水平、垂直和左右书写模式来讨论：

• 在水平书写模式writing-mode: hortizontal-tb下，盒子会在水平方向上从左到右排列，空间不够时换到下一行继续。
• 在垂直书写模式下writing-mode: vertical-rl | vertical-lr，盒子会在垂直方向上从上到下排列，空间不够时换到下一行继续。只是这里的“下一行”有左右之分。
• writing-mode: vertical-rl时就像古代人书写以及日本台湾书籍的格式一样，从右到左排列。
• writing-mode: vertical-lr则是从左到右排列。

每“行”在浏览器中会被作为一个盒子处理，这个盒子叫行框（line box）。它的高度由其包含行内元素的最低位置到最高位置（不包含margin）计算而来。因为考虑盒子间对齐处理的关系，这个值可能会比行内最高的元素要高。

三、布局规则

IFC布局规则：

• 在行内格式化上下文中，boxes一个接一个地水平排列，起点是包含块的顶部。
• 水平方向上的margin border padding在框之间得到保留
• 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐

BFC布局规则：

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

四、如何产生BFC

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
1. float的值不为none
2. overflow的值不为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static 

CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式 

五、BFC的作用与特点

• 清除外部浮动
• 不和浮动元素重叠
• 阻止浮动元素覆盖

清除浮动：当父盒子div未设置高度，子盒子都设置浮动，则父元素会出现高度塌陷的情况。

解决方案：给父元素添加overflow:hidden，使其形成BFC，计算高度时会计算float元素的高度，达到清除浮动影响的效果。

布局：自适应两栏布局。

六、FFC

自适应格式化上下文

• display值为flex或者inline-flex的元素会自动生成自适应容器。
• 设置为flex的容器会被渲染成一个块级元素，而设置为inline-flex的元素会被渲染成一个行内元素，容器外的元素和容器内的子元素不受影响。

七、GFC

 网格格式化上下文

• display：gird产生，与flex相似，flex元素相对于轴线布局，gird里面可以放多个项目，是一个二维的表格。
• 产生行和列，每个元素指定在“单元格”，比flex更大