块级格式化上下文(BFC)

是什么

是块级的格式化上下文，其上下文内有其特定的布局规则，是浮动元素与其它元素可发生交互的区域

以下几个常用的方式会创建块级格式化上下文：

<html></html> （根元素即是 BFC）
float 不为 none（浮动元素）
position 为 absolute,fixed（绝对定位元素）
display 值为以下之一
- 专门用于创建BFC的 flow-root，意在无副作用的创建BFC
- 行内块级 inline-block
- 表格相关 table,table-cell…
灵活布局(flex)或栅格布局(grid)的直接子元素（子元素不能为 flex,grid 或 table 容器）

其它详细的创建方法可查阅MDN 文档

BFC 常常用来清除浮动，因为其效果有：

通俗来说就是 创建一个内外隔绝的环境，外部不会影响到内部，内部也不会影响到外部

下面代码由一个父元素包裹两个同级的子元素，第二个子元素为浮动元素

由于第二个子元素是浮动的，所以会导致父元素高度坍塌

但是当我们在父元素创建一个 BFC 后，就不会造成高度坍塌了，这是我们说的第一个特性：包含内部浮动

两个同级元素，要构建一个左栏固定宽度 + 右侧填充的布局，左侧使用浮动的话会和右侧重叠

在右侧创建 BFC 后可以解决这个问题，这里利用了 BFC 的 排除外部浮动 特性

一般可以通过给重叠的元素套一个父元素，并设置父元素的内边距 padding、border 等来防止外边距重叠，但如果当前元素不能设置这些属性，这时就要靠 BFC 了

可以通过在元素外部包裹一个创建了 BFC 的元素来防止外边距重叠

参考

BFC | MDN