CSS-BFC

定义

        "BFC容器"通常是指"块级格式化上下文容器"（Block Formatting Context Container）。块级格式化上下文（BFC）是在CSS中用来管理和控制元素在页面上布局和排列的一种机制。BFC容器是一种具有特定规则的HTML元素或CSS属性，它们会创建一个独立的上下文，影响其内部元素的布局和排列方式。BFC容器是CSS布局中的一个重要概念，可以帮助开发人员更精确地控制元素的布局和排列

现状

常规状态下，块盒会发生以下情况：

1. 水平方向上，撑满整个包含块宽度；垂直方向上，依次摆放
2. 垂直方向上相邻的元素，margin会合并
3. 父子关系情况下，可能会产生margin塌陷
4. 父子关系情况下，父元素无视浮动元素会产生高度塌陷
5. 兄弟关系情况下，正常元素可能会被浮动元素覆盖

作用

1. 开启BFC,其子元素不会再产生margin塌陷问题
2. 开启BFC，就算其子元素浮动，也不会产生高度塌陷问题
3. 开启BFC，自己不会被其他浮动元素覆盖（不会与浮动元素重叠，会避开浮动元素排布）

开启BFC

根元素本身为一个BFC空间

1. 设置float属性（值不为none就行）
2. 设置position属性（属性值需要是absolute或者fixed）
3. 设置overflow属性（属性值不为visible就行）
4. 设为行内块元素（inline-block）
5. 设为伸缩项目（成为flex盒子内的item,即设置父元素display为flex）
6. 设置display为flow-root属性
7. 多列容器（设置column-count）
8. 设为表格元素（display:table）

特性 

1. 内部的 Box 会在垂直方向上一个接一个的放置。

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