块格式化上下文

块格式化上下文（Block Formatting Context，BFC）

具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器（块级元素），容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。

创建块格式化上下文

下列方式会创建块格式化上下文：

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• overflow 计算值(Computed)不为 visible 的块元素
• display 值为 flow-root 的元素

功能

功能：

1. 包裹住子元素，（消除了父元素因子元素脱离文档流而高度坍塌的问题，其中 flow-root 最好用无副作用，纯粹完成BFC功能）
2. BFC会阻止外边距折叠
3. 划清界限（overflow：auto较好）

解释：
2：
折叠：两个相邻的盒子（可能是兄弟关系也可能是祖先关系）的垂直外边距可以合并成一个单独的垂直外边距。这种合并外边距的方式被称为折叠。

在同一个BFC中，两个相邻的块级元素在垂直方向上的外边距会发生叠加，具体的叠加规则如下：

• 当两个块级元素的外边距都为正数时，取较大者
• 当两个块级元素的外边距都为负数时，取较大者
• 当一正一负时，为两者的和

根据上面的定义可知，发生折叠的条件是：两个块级元素位于同一个BFC中，因而要阻止外边距折叠只需要产生新的BFC。

创建了BFC的元素，不和它的子元素发生外边距折叠。 因而如果同一级中的块级元素发生折叠情况(兄弟关系)，不能在元素本身上产生BFC属性，而应该给任意一个元素新建一个BFC容器(新增父级元素并设置为新的BFC，例如设置overflow:hidden;)。如果是祖先关系，则只需要触发父级BFC。
3：
浮动容易导致浮动元素空间被占领的问题，可以使占领浮动元素的空间的元素变为BFC从而划清界限，如果要设置外边距应给非BFC设置。

注意

注意：

1. BFC内有BFC则外BFC不可以包含内BFC内的元素但可以包含内BFC
2. 没有任何情况一定需要BFC但面试要