小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
什么是BFC
BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC触发条件
- 根元素或其它包含它的元素；
- 浮动 (元素的
float不为none)； - 绝对定位元素 (元素的
position为absolute或fixed)； - 行内块
inline-blocks(元素的display: inline-block)； - 表格单元格(元素的
display: table-cell，HTML表格单元格默认属性)； overflow的值不为visible的元素；- 弹性盒 flex boxes (元素的
display: flex或inline-flex)；
但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。
BFC特性
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
- 垂直方向上的距离由 margin 决定，在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”；**解决办法**：把上面的盒子外层加一个div并设置overflow:hidden；这时与下面盒子不属于一个bfc。
- 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
- 浮动盒区域不叠加到BFC上；
作用
-
子元素 float 后，父元素高度坍塌，可以设置 父元素 overflow: hidden
-
margin 合并问题
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
那么，如何避免合并呢？让其中一个盒子是 bfc 即可
