前言
BFC（Block Formatting Context）块级排版上下文。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。本文介绍了为什么会有 BFC 以及 BFC 的特点及其作用。
为什么会有 BFC
IFC 也好，BFC 也好，归根到底是对不同盒模型渲染方式的定义。
盒子是 CSS 布局的对象和基本单位，⼀个页面是由很多个盒子组成的。
我们对盒子的布局方式（渲染方式）进行了多种的定义（格式化上下文，Formatting Context）以便于更好的实现布局。
我希望形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局，这个空间就像块（block）一样可以砌在一起，被称之为块格式化上下文（Block Formatting Context，BFC）。
BFC（块格式化上下文）
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。（摘自MDN）
BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
某些容器会创建一个 BFC：
- 根元素：
body； - 元素设置浮动：
float除none以外的值； - 元素设置绝对定位：
position(absolute、fixed)； display值为：inline-block、table-cell、table-caption、flex等；overflow值为：hidden、auto、scroll；
BFC 内的排版规则：
- 盒子从上到下摆放
- 垂直
margin合并 - BFC 内盒子的
margin不会与外面的合并 - BFC 不会和浮动元素重叠
BFC的作用：
- 解决margin的重叠问题
由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。 - 解决高度塌陷的问题
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。 - 创建自适应两栏布局
可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。
参考资料
Introduction to formatting contexts 格式化上下文简介 - CSS（层叠样式表） | MDN
块格式化上下文 - Web 开发者指南 | MDN
前端面试题之CSS篇
