BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。
BFC
定义：BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。
特性：
- 1.处于同一个BFC中的元素相互影响，可能会发生margin合并（垂直方向）；
- 2.BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
- 3.计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
- 4.浮动盒的区域不会叠加到BFC上；
形成规则：
- 浮动（float的值不为none）；
- 绝对定位元素（position的值为absolute或fixed）；
- 行内块（display为inline-block）
- 表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
- 弹性盒（display为flex或inline-flex）；
- overflow不为visible；
BFC使用场景：
1.防止垂直margin重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。
a：防止父子元素的边界重叠
默认效果：若块元素和它的第一个子元素（或最后一个子元素）之间没有 border、padding、inline content、 clearance 来分隔，那么上边距（或下边距）会被父子元素所共享，父子元素边界重合
解决方案：根据BFC的特性2,让父元素成为BFC即可。
示例：
<style>
.parent {
background: #E7A1C5;
/*overflow：hidden使其形成一个BFC*/
overflow:hidden;
}
.parent .child {
background: #C8CDF5;
height: 100px;
margin-top: 10px;
}
</style>
<section class="parent">
<article class="child"></article>
</section>
前后对比：
b:防止兄弟元素的边界重叠
默认效果：在同一个BFC中的两个元素垂直方向上的margin会发生合并，外边距以大的为准
示例：默认效果
<style>
#margin {
background: #E7A1C5;
overflow: hidden;
300px;
}
#margin>p {
background: #C8CDF5;
margin: 20px auto 30px;
}
</style>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
默认效果：
可以看到1和2,2和3之间的间距不是50px，发生了边距重叠是取了它们之间的最大值30px。（垂直方向margin合并）
解决方案：根据BFC的特性2，在不需要margin合并的元素外创建一个BFC上下文（外围用一个BFC包裹）
<section id="margin">
<p>1</p>
<!--外围创建一个BFC上下文-->
<div style="overflow:hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
修改后效果：
;
注：其实空元素的边界也会重叠（假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，这个时候只需要在上下边距之间有填充即可）
2.阻止元素被浮动的元素覆盖（可做两栏布局自适应）
默认效果：某元素会被旁边浮动元素遮盖
解决方案：根据BFC特性4，让该元素成为BFC即可
示例：
<style>
.box {
400px;
height: 100px;
margin: 0 auto;
}
.green {
100px;
height: 50px;
float: left;
background-color: green;
}
.red {
200px;
height: 100px;
/*添加overflow：hidden使红色盒子成为BFC*/
overflow: hidden;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="green"></div>
<div class="red">BFC</div>
</div>
</body>
前后对比
注：将红色盒子设置为BFC后，若该盒子没有设置宽度，则该盒子会根据父元素和绿色盒子（浮动元素）的宽度来进行自适应，因此可做两栏布局自适应。
3.清除子元素浮动的副作用
默认效果：当我们不给父元素设置高度，子元素设置浮动的时候，父元素会发生高度塌陷
解决方案：根据BFC特性3，让父元素成为BFC即可
示例：
<style>
.box {
200px;
border: 1px solid #ccc;
/*添加overflow:hidden使其成为BFC*/
overflow：hidden;
}
.son {
100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
前后对比：
IFC
定义：Inline Formatting Contexts，也就是“内联格式化上下文”。
特性：
- 1.子元素水平方向横向排列，并且垂直方向起点为元素顶部。
- 2.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align） - 3.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
- 4.IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
- 5.IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
- 6.当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
- 7.当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
形成规则：
- 块级元素中仅包含内联级别元素
ps：是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC
IFC产生的现象：
1.文本的上下间距不生效（IFC特性2导致）
<style>
.warp { border: 1px solid red; display: inline-block; }
.text {
/*内联元素只有左右margin生效了*/
margin: 20px;
background: green;
}
</style>
<div class="warp">
<span class="text">文本一</span>
<span class="text">文本二</span>
</div>
效果：左右margin撑开，上下margin并未撑开，符合IFC规范，只计算横向样式控件，不计算纵向样式空间。
2.多个元素水平居中（IFC特性6导致）
<style>
.warp { border: 1px solid red; 200px; text-align: center; }
.text { background: green; }
</style>
<div class="warp">
<span class="text">文本一</span>
<span class="text">文本二</span>
</div>
效果：水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。
3.float元素优先排列（IFC特性4导致）
<style>
.warp { border: 1px solid red; 200px; }
.text { background: green; }
.f-l { float: left; }
</style>
<div class="warp">
<span class="text">这是文本1</span>
<span class="text">这是文本2</span>
<span class="text f-l">这是文本3</span>
<span class="text">这是文本4</span>
</div>
效果：IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。
利用IFC还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。
FFC
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex 或者 inline-flex 的元素将会生成自适应容器（flex container）。
GFC
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，即display值为grid的元素
和 table 的区别：同样是一个二维表格，gridLayout 会以更加丰富的属性来控制行列、控制对齐以及更精细的控制语义
相关问题：
BFC定义：块级格式化上下文，BFC就是一个页面上独立的容器，规定了内部的块级元素如何布局，并且这些块级元素不会影响外部元素。
BFC有以下约束规则：
1.内部的BOX会在垂直方向上一个接一个的放置
2.同一个BFC的两个相邻BOX的margin会发生重叠
3.每个元素的左外边距和包含块的左边界相接触
4.BFC的区域不会和float的区域重叠
5.计算BFC高度时，浮动子元素也参与计算
BFC的作用
1.自适应两栏布局
2.清除浮动
3.防止垂直margin重叠
BFC的生成条件
1.根元素
2.overflow不为visiable
3.float不为none
4.position属性为absolute/fixed
5.display为inline-block、table-cell、flex等
清除浮动的方法
1.父元素BFC overflow:hidden
2.新增底部兄弟元素 clear:both 块级元素的左右都不能有浮动元素
3.添加自身伪元素 伪元素是元素的子元素，在元素的内容之前或者之后