BFC 块级格式化上下文

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;