概述
BFC（Block Formatting Context）块级格式化上下文。我并不知道 BFC 是什么，但是只要写出样式，我就知道这是不是 BFC。BFC 没有明确的定义，只有特征或功能。
形成 BFC 条件
浮动（
float: left | right）绝对定位元素（
position: absolute）非块盒的块容器（
display: inline-block | table-cells | table-captions）overflow 不为 visible 的块盒（
visible: auto | hidden | scroll）display: flow-root==> 专门用于使得当前元素触发 BFC
功能
-
将内部浮动元素包裹起来
使用 BFC 将其内部浮动元素包裹起来
BFC 将内部浮动元素包裹起来
-
两个相邻的 BFC 划清界限
float + div 左右自适应布局
BFC 两个相邻 BFC 划清界限
BFC 与 文档流
BFC 是本身特性，它会影响元素的宽高
文档流指内联元素从左到右排列，块级元素从上到下排列。它会影响元素的排列顺序
二者没有关系
BFC 里面有文档流，BFC 本身也可以是文档流
最佳实践 & 套路
不要去使用 BFC
- 清除浮动使用
clearfixclearfix::after{ content: ''; display: block; clear: both; } - 划清界限使用
display: flex
使用display: flex + flex: 1
display: flex + flex: 1
相关知识点
BFC 内部相邻块级元素竖直 margin 合并
