BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
- BFC就是用来格式化块级盒子的
Formatting Context：指页面中一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用
通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部
一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。
形成的条件：
- 浮动元素， float 除 none 以外的值
- absolute, fixed 定位
- display: inline-block | tabel-cell | table-caption | flex | inline-flex
- overflow 除 visible 以外的值
- 根元素或包含它的元素
特性：
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由 margin 决定，在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”
- bfc 区域不会和 float 区域重叠
- 计算 bfc 高度时，浮动元素也参与计算
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，反之亦然
作用：
- 子元素 float 后，父元素高度坍塌，可以设置 父元素 overflow: hidden
- margin 合并问题
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
那么，如何避免合并呢？让其中一个盒子是 bfc 即可
-
左图片，右文字 两栏布局
图片是 float， 右边是个 <p> 这里是文字..... </p>
给 <p/> 创建 bfc, 例如 加 overflow: hidden;
可以看到，发生了文字环绕，如何不想文字环绕呢？
