【面试题-CSS】什么是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；