这篇笔记主要是说说对这篇文章 BFC的理解和应用 中例子的理解
概念
BFC全称为Block Formatting Context，即“块级格式化上下文”。
特点
- BFC可以包含浮动元素（闭合浮动）
- BFC所确定的区域不会与外部浮动元素发生重叠
- 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠
- 位于不同BFC下的相邻元素之间不会发生margin重叠
如何触发
若某个元素满足以下任一条件，则会对其创建BFC：
- <html>根元素
- float的值不为none
- overflow的值为auto、scroll或hidden
- display的值为table-cell、table-caption或inline-block
- position的值为fixed或absolute
常见用途
闭合浮动
由于BFC可以包含浮动元素，所以当一个元素容器内部存在浮动元素时，为了防止容器高度“坍塌”，可以对容器创建BFC。
创建BFC后：
这里主要用到 特点1。
防止margin重叠
同一BFC内的相邻元素上下margin会融合（特点3）。
创建BFC后：
这里主要用到 特点4，通过给ddd的父节点添加overflow:auto创建BFC后，ddd和ccc已经不在同一个BFC中。
自适应流体布局
创建BFC后：
这里主要用到 特点2，给元素添加overflow:auto创建了新的BFC。