关于BFC

什么是BFC

Block Formatting Context直译为“块级格式化范围”,BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局
在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，并且不是 block ，就是inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。

触发BFC的条件

情况一、如果是父子关系元素，触发条件添加给父元素。
情况二、如果是兄弟关系元素，触发条件添加第二个元素。
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、table-caption和inline-block之一
4.position的值为absolute和fixed之一
5.当前元素转换为根元素，最好不用此方法，一个页面里只能有一个根元素。（display：flow-root，对上下margin重叠无效）

BFC布局与普通文档流布局区别

普通文档流布局规则
1.浮动的元素是不会被父级计算高度(父子关系元素)
2.当子元素与父元素都没有添加float属性的情况下，给子级添加margin-top会传递给父级（父子级关系元素）
3.非浮动元素会覆盖浮动元素原有的位置（兄弟关系的元素）。
4.两个相邻元素上下margin不相加(兄弟关系的元素)

BFC布局规则
1.浮动的元素会被父级计算高度（父级添加overflow:hidden触发了BFC）
2…当添加bfc触发条件后，margin-top不会传递给父级（父级触发了BFC）
3.非浮动元素不会覆盖浮动元素原有位置（非浮动元素加overflow：hidden触发了BFC，display：inline-block）
4.两个相邻元素上下margin会相加（给其中一个元素增加一个父级，然后给他的父级添加overflow：hidden触发BFC，给第二个子元素添加display：inline-block）