# 块级格式化上下文
全称Block Formatting Context，简称BFC。 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
# 常规流块盒的特点
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素
# BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素 （意味着，
<html>元素创建的BFC区域，覆盖了网页中所有的元素) - 浮动和绝对定位元素
overflow值不为visible或clip的块级元素display值为flow-root的元素
更多查看MDN 区块格式化上下文 (opens new window)
# BFC的规则
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部 具体规则：
- 创建BFC的元素，它的自动高度需要计算浮动元素
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，不会和它的子元素进行外边距合并