CSS中的BFC是什么

BFC的介绍

块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素

触发BFC的条件

概述：定位、浮动、overflow: hidden、display 不为 none 的各种。

1. position为absolute或fixed

2. display属性值为inline-block | flex | inline-flex | table-cell | table-caption

3. float属性不为none（如：left | right）

4. overflow的值不为visible（如：hidden | auto | scroll）

为什么要使用BFC

1. BFC可以解决子元素浮动导致父元素高度塌陷问题
2. BFC可以解决两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准，即margin重叠问题

   1. 出现的元素：垂直排列的两个兄弟~纵向

   2. margin重叠问题：给上面的添加下外边距,给下面的添加上外边距的时候,两个盒子之间的间距为:最大值

   3. 有了BFC就可以解决margin重叠

3. 不被浮动元素覆盖
4. 防止文字环绕

BFC的特性

1. 内部的Box会在垂直方向上一个接一个的放置。
2. 垂直方向上的距离由margin决定
3. bfc的区域不会与float的元素区域重叠。
4. 计算bfc的高度时，浮动元素也参与计算
5. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。