目录
CSS的布局单位
组成一个页面的最小单位是节点，说白了就是一个个的节点盒子，每个节点盒子都有默认的渲染规则，如body标签就是典型的bfc规则渲染区域
formatting context概念
formatting context是页面中的一块渲染区域，并且有自己的一套渲染规则，这套规则决定元素的渲染方式
常见的formatting context 渲染规则有两种，box类型的不同，决定了box采用的渲染规则不同
Block Formatting Context(BFC) ：只有block-level box 参与
Inline Formatting Context(IFC)：inline-level box 参与
什么是BFC
BFC（Block Formatting Context）翻译过来就是（格式化上下文），是web页面中盒模型布局的css渲染模式
，它是独立的渲染区域，不受外部布局影响
了解BFC是页面布局不可缺少的一个基本知识点
BFC的特点
注意：普通盒子满足一定条件将成为bfc盒子（即创建bfc区域）
- 在同一个bfc区域，内部盒子总是垂直排列
- 在同一个bfc区域,内部盒子垂直方向上的距离由marging决定，相邻两个box的margin值会发生重叠
- BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样）
- 在同一个bfc区域内的每个bfc盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠
- BFC是页面上的一个独立容器，容器内外布局不会相互影响
- 计算BFC高度时，区域内的浮动元素会参与计算
创建BFC区域
满足以下任意一点即为创建BFC区域
- 根元素（
<html>） - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或inline-table） -
overflow值不为visible的块元素 -
display值为flow-root的元素 -
contain值为layout、content或 paint 的元素 - 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不为auto，包括column-count为1） -
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
验证BFC的特点（实践操作）
我们知道根元素(body)本身就是BFC盒子，因此我们可以此为基础，来验证BFC区域的各个特点
1.在同一个bfc区域中，元素盒子总是垂直排列的
除去body之外不可见部分，我们可以看到body中的box遵循第一个特点，总是垂直排列的
结果：BFC内部box之间总是垂直排列的
2.垂直方向上的距离由marging决定，在同一个bfc区域中，相邻两个box的margin值会发生重叠
结果：BFC内部中，box与box之间的距离由margin决定（本来应该是20px，当仅显示10px），因此box与box之间存在margin重叠的现象
3.BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样）
结果：我们可以看到无论是有浮动还是无浮动，bfc区域内的box的左边margin与BFC区域（即body）左边border相接触
4.bfc区域内部每个具有bfc特性的盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠
结果：我们可以知道，body整个BFC区域中，aside/main这两个bfc子区域 不会发生重叠，而是水平排列
6.计算BFC高度时，区域内的浮动元素会参与计算
结果:当父元素本身不是BFC区域时，子元素的大小不会加入的父元素大小的计算中，因此出现了坍缩现象（如下图）
而当我们把父元素设置为BFC渲染区域时，则浮动子元素会参与父元素总体大小的计算（如下图）