BFC(Block Formatting Context）

BFC 是什么
我们在页面布局的时候，经常出现以下情况：
这个元素高度怎么没了？
这两栏布局怎么没法自适应？
这两个元素的间距怎么有点奇怪的样子？
原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件
可以通过如下的设置来触发（产生）一个BFC：
根元素，即 HTML 元素
浮动元素：float 值为 left、right
overflow 值不为 visible，为 auto、scroll、hidden
display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position 的值为 absolute 或 fixed

开启BFC 盒子变化

• 当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。
• 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

应用场景

• 清除元素内部浮动
• 解决盒子margin合并问题（塌陷也可以解决）
• 实现元素宽度自适应多列布局
  • 制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）
    • 当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。