块级格式化上下文
概念
全程Block Formatting Context，简称BFC
它是一块独立的渲染区域，规定了在该区域中，常规流块盒的布局
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素
BFC的产生
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素 意味着，
<html>元素创建的BFC区域，覆盖了网页中所有的元素 - 浮动元素和绝对定位元素
- overflow不等于visible的块盒
display=flow-root的盒子
解决什么问题
- bfc内的子元素不会产生margin塌陷的问题
- 自己不会被其他浮动元素覆盖
- 子元素浮动，元素自身高度也不会塌陷
包含块
- 普通元素，浮动元素：父元素的内容区域
- 绝对定位元素：offsetParent的填充盒（padding）
