概念
- BFC的意思是，块级格式化上下文。它属于CSS三种布局模型（流动模型-Flow、浮动模型-Float、层模型-Layer）中的流动模型（Flow）
- 它是页面中的一块渲染区域，并且有着一套属于自己的渲染规则
- 内部的元素会在垂直方向上一个接一个的放置
- 对于同一个BFC（也就是同属于一个BFC容器里边）的两个相邻容器的margin会发生重叠现象，并且是以margin数值较大的为准。但是该现象只发生在垂直方向上的margin，水平方向上的margin不会发生重叠
- 每个元素的左边外边距的计算起点是从这个元素的左边框的内侧（也就是这个距离要包含元素左边框宽度）开始计算的
- BFC区域不会和float区域重叠
- 计算BFC的高度时，浮动元素参与计算
- BFC是页面中的一个具有隔离的独立容器，容器里的子元素不会影响到外边的元素，反之亦然
- BFC的目的是形成一个相对于独立外界的空间，让内部的子元素不会影响到外部的元素
触发BFC的条件
- body根元素
- 浮动元素：就是float不为none的元素
- 绝对定位元素：position为adsolute或者fixed
- overflow的值不为visible，而是为auto、scroll、hidden
- display的值为inline-block、table-cell、table-caption、flex、grid
触发BFC的方法
- 设置元素浮动（不推荐）
- 使用这种方式，虽然能够撑开父元素，但是会导致父元素的宽度丢失
- 并且使用这种方式会导致下边的元素上移，不能解决问题
- 设置元素为inline-block（不推荐）
- 因为会导致宽度丢失，并且会出现三像素的空白问题
- 将元素的overFlow的值设置为一个不会visible的值
- 将这个值设置为hidden的副作用是最小的
- 使用绝对定位
- 但是这样元素会脱离文档流，会导致父元素的宽度丢失，并且会导致下边的元素上移
需要利用BFC的应用场景
- 出现了margin重叠的问题
- 两个元素之间发生了margin重叠（塌陷）的问题，所以，我们可以给这两个元素之间的其中一个的外层包裹一容器，并给这个容器开启BFC（overFlow：hidden）
- 清除一个元素的内部浮动
- 这个元素的父元素发生了高度塌陷的问题，因为这个元素是个浮动元素，这时我们可以给父元素开启BFC模式（overFlow：hidden），因为在BFC模式下，盒子进行高度计算时，也会把浮动元素的高度计算进去
- 实现自适应多栏布局（利用BFC元素不会和Float元素重叠的特性）
-
两栏布局
-
如果左边（右边）的元素是浮动元素时，另一边的元素会与浮动元素重叠，这是我们就可以给这个元素开启BFC模式，这样就不会与浮动元素重叠了，并且还会根据这两个的父元素宽度进行自适应
-
多栏布局
-
