一、盒子模型

要理解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更大

学习理解BFC、IFC、GFC、FFC相关推荐

(37) BFC IFC GFC FFC概念
一.什么是FC? Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作 ...
BFC/IFC/GFC/FFC分别是什么？
BFC
css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What's FC? 一定不是KFC,FC的全称是:Formatting C ...
深入理解BFC与IFC
一.盒子模型要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下: 从内到外依次为 content -> padding -> border -> margin 常见的盒模 ...
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
Docker镜像原理学习理解
Docker镜像原理学习理解一.Docker镜像的组成 1.Docker镜像图层 2.union file system 3.镜像层-bootfs 4.镜像层-rootfs 5.镜像层-依赖环境 6 ...
LTE学习理解系列——TDD LTE信源指定时隙配比设置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 LTE学习理解系列--TDD LTE信源指定时隙配比设置前言详细配置结语前言目前暂时关注时隙配比的设置,因为每一种时隙配比可 ...
python语言通俗理解_慢步学习，python语言编程，来扯扯语言的学习理解
最近慢步工作比较忙,有那么一丢丢挫伤了学习的积极性.积极性受挫的另一个原因是,慢步对自己给读者提供的内容有些困惑,"我能提供什么有价值的内容?" 不断重复书籍的知识点,好像并不能生 ...
5G NR学习理解系列——时频结构及相关概念
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 5G NR学习理解系列--时频结构频段工作带宽信道带宽子载波间隔(SCS) SLOT长度 OFDM符号时长采样点时长无线帧 ...

学习理解BFC、IFC、GFC、FFC