什么是 BFC
BFC => block formatting context, 中文直译块格式化上下文
- 视觉格式化模型
视觉格式化模型定义了 box 的生成，盒包含块盒，行内盒，匿名盒，以及实验盒，盒的类型由 display 属性决定
块盒
当元素 display 属性为 block, list-item 或 table
视觉上上呈现为块状，垂直排列
每个块级元素至少生成一个块级盒，称为主要块级盒
块级盒参与
行内盒
当元素 display 属性是 inline，inline-block 或 inline-table
视觉上将内容与行内级元素排列为多行
行内级元素生成行内级盒，参与行内格式化上下文
不参与行内格式化上下文的行内级盒称为原子行内级盒，display 值为 inline-block,inline-table
匿名盒
分为匿名块盒盒匿名行内盒，因为没有具体的名字，也无法用选择器来选择他们，所以他们的所有属性都为 inherit 或初始默认值
三个定位方案
- 常规流
盒是一个接着一个排列
在块级上下文，是垂直排列
在行内上下文，水平排列
当 poisition 为 static 或 relative，并且 float 为 none 时触发常规流
对于静态定位，盒的位置是常规流布局里的位置
对于相对定位，盒的位置由 top right bottom left.即使偏移，仍然保持原有位置，其他常规流不能占用
浮动
它位于开头或末尾
导致常规流围绕在它周边，除非设置了 clear 属性
绝对定位
绝对定位，当盒从常规流中移除，不影响常规流布局
定位相对于它的包含块，top right bottom left
position 是 absolute 或 fixed
对于 position: absolute,元素定位将相对于最近的一个 relative, fixed, absolute 的父元素，如果没有就是 body
BFC 的创建方法
根元素()
浮动元素（元素的 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 或 strict 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
BFC 的效果
- 内部的盒会在垂直方向上一个接着一个排列
- 处于同一个 BFC 中的元素相互影响
- 每一个 margin box 的左边，与容器块 border box 的左边接触。即使存在浮动也是如此；
- BFC 就是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素，同时也不会收到外面元素的影响
- 计算 BFC 高度的时候，考虑 BFC 所包含的所有元素，连浮动元素也参与计算
- 浮动盒区域不叠加到 BFC 上
总结
在实际中，利用 BFC 可以闭合浮动，防止浮动元素重叠。同时，由于 BFC 的隔离作用，可以利用 BFC 包含一个元素，防止这个元素与 BFC 外的元素发生 margin collapse