# 块级格式化上下文
`BFC`块级格式化上下文`Block Formatting Context`，是`Web`页面的可视`CSS`渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。
## 触发BFC
* 根元素``。
* 浮动元素，元素的`float`不是`none`。
* 绝对定位元素，元素的`position`为`absolute`或`fixed`。
* 行内块元素，元素的`display`为`inline-block`。
* 表格单元格，元素的`display`为`table-cell`。
* 表格标题，元素的`display`为`table-caption`。
* 匿名表格单元格元素，元素的`display`为`table`、`table-row`、`table-row-group`、`table-header-group`、`table-footer-group`、`inline-table`。
* `overflow`值不为`visible`的块元素。
* `display`值为`flow-root`的元素。
* `contain`值为`layout`、`content`或`paint`的元素。
* 弹性元素，`display`为`flex`或`inline-flex`元素的直接子元素。
* 网格元素，`display`为`grid`或`inline-grid`元素的直接子元素。
* 多列容器，元素的`column-count`或`column-width`不为`auto`，包括`column-count`为`1`。
## BFC应用
### 避免浮动溢出
```html
避免浮动溢出
```
### 避免外边距合并
```html
避免外边距合并
```
### 避免浮动文字环绕
```html
避免浮动文字环绕
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
## 参考
```
https://www.jianshu.com/p/0d713b32cd0d
https://segmentfault.com/a/1190000009624181
https://segmentfault.com/a/1190000013514597
https://blog.csdn.net/qq_41257129/article/details/89641726
https://blog.csdn.net/sinat_36422236/article/details/88763187
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
```