关于BFC和overflow:hidden清除浮动原理

BFC是什么？

BFC是在css2.1定义的，关于渲染定位的概念。BFC的全程是 Block Formatting Context，就是块级格式化上下文。

在理解bfc之前我们先来看看另一个概念，就是视觉格式化模型。

视觉格式化模型

下面是MDN中队视觉格式化模型的定义。

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

1. 盒子的尺寸：精确指定、由约束条件指定或没有指定
2. 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
3. 定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
4. 文档树中的其它元素：即当前盒子的子元素或兄弟元素
5. 视口尺寸与位置
6. 所包含的图片的尺寸
7. 其他的某些外部因素

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。