BFC 是什么？
BFC 即 Block Formatting Contexts (块级格式化上下文)。它可以是块级元素也可以是块级行内元素，可以是普通流，可以浮动也可以绝对定位。总得来说，它普普通通、随处可见。
BFC 有什么用？
可以把它看成一个封闭的大箱子，不论箱子内怎么折腾，箱子对外界不产生任何影响。浮动元素不能叠加在 BFC 上(适用于一侧固定，一侧自适应宽度)。在它内部：
-
浮动元素参与计算高度。
-
垂直方向相邻的 块级元素 外边距不叠加，取最大的那个。
如何触发 BFC？
满足下列任一条件即可
-
float: left | right
-
position: absolute | fixed
-
overflow: hidden | auto | scroll
-
display: flex | inline-flex | inline-block | table-cells
