什么是BFC ？如何创建 BFC ？BFC 有什么用

#一、什么是BFC （Block Formatting Context）：

BFC（块级格式化上下文）是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域指对块级元素起作用。 BFC可以让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局。

#二、BFC 有什么用：

1）防止外边距重叠 BFC导致的属于同一个BFC中的子元素的margin重叠。(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

2）清除浮动的影响 块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。 原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。 解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为BFC，就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。

3）防止文字环绕

#三、如何创建BFC：

1、（子）float：left/right。

2、（子）position：absolute/fixed。

3、（子）display：inline-block；

3、（父）display：flex；

4、（父）overflow：hidden/scroll/auto；

#触发条件

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：

• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。

#BFC渲染规则

• BFC垂直方向边距重叠
• BFC的区域不会与浮动元素的box重叠
• BFC是一个独立的容器，外面的元素不会影响里面的元素
• 计算BFC高度的时候浮动元素也会参与计算