BFC
全称Block Formatting Context
每个渲染区用formatting context表示，它决定来其子元素如何定位，以及和其他元素的关系和相互作用。
在常规流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。
我们可以理解为：BFC是块级格式化上下文的布局规则
BFC的产生(触发)
1.根元素 html
2.float属性为left / right
3.position为absolute / fixed
4.display为 inline-block / flex / inline-flex
5.overflow不为visible（auto scroll hidden ）
特性
- 内部的box会在垂直方向，一个接一个的放置
- box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠 每个元素的margin-box的左边，与包含块border box的左边相接触
- BFC的区域不会与float box 重叠
- BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也如此。
- 计算BFC高度时，浮动元素也参与计算
作用
margin合并 ；
contain float；
IFC
IFC 是一种内联格式化上下文的布局规则
块容器盒里只有行级元素的时候，自动生成IFC
