这是我参与「第四届青训营 」笔记创作活动的第2天

1. IFC（内联行格式化上下文）

Inline Formatting Contexts
条件：在块级元素内仅有内联元素，不包含块元素

作用：用于 布局内联元素 盒子的一块 渲染区域。

IFC布局规则
1、盒子从顶部开始依次水平摆放，如果容器的宽度不足则换行，换行后在垂直方向上没有间隔，但不会重叠；
2、在水平方向上，计算盒子的padding、border和margin占用的空间，在垂直方向上则不会占用盒子的高度；
3、在垂直方向上，盒子对齐的默认对齐是baseline；
4、行盒的高度取决于行盒内最高的inline boxes。
由于在IFC中不能存在块元素，一旦有有块元素加入IFC后，IFC会转换为BFC。

2. BFC（块级格式化上下文）

Block Formatting Context BFC是对盒模型布局的CSS渲染模式，是一个独立的渲染区域。其作用是形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

BFC的触发条件

（1）将元素设置浮动，设float:right/left;
（2）将overflow设置为：auto/ scroll /hidden；
（3）将display设置为：inline-block/inltable-cell/table-caption/table/inline-table/flex/inline-flex/grid/inline-grid；
（4）将position设置为：absolute/fixed；
（5）根元素，HTML元素；
（6）……

注意：同一个 BFC 下的两个相邻块级元素，会发生上下方向的 margin 重叠。两者之间的距离以大的margin值为准。

BFC的特性

（1）在BFC内部，盒子在垂直方向依次排列；
（2）在垂直方向上，同一个BFC内相邻的盒子会在margin上重叠，在垂直方向上的距离取决于margin；
（3）浮动元素也参与计算BFC的高度；
（4）BFC不会与浮动的元素重叠；
（5）BFC内部的元素不会影响到外部的元素，同时外部的元素也不会影响内部的元素。