浅析BFC——块级格式化上下文
块级格式化上下文是在CSS定位中非常有用的一个概念，它决定了部分元素的定位方式以及和其他元素的相互作用。下面从CSS布局开始来一步一步分析BFC的用法。
CSS定位方案
在解释BFC之前，必须介绍一下在CSS中基础布局是如何实现的。首先一个HTML是由很多box组成的。元素的类型决定了box的类型，主流box分为以下两种:
- block-level box: display属性为block,list-item,table的元素，也是div的默认类型。
- Inline-level box: display属性为inline, inline-block,inline-table的元素。
HTML根元素为第一个BFC。不同类型的box将以不同方式渲染在文档普通流中进行布局在普通流中，元素按照HTML的先后位置从上到下布局，块级box被渲染为单独一行，行内box水平排列，直到当行被占满才换行。BFC正是在普通流中针对块级box元素生成的一个布局属性，这个属性影响了元素内部的定位方式以及和兄弟元素之间的相互作用方式。
触发BFC属性
满足下列任一条件的元素将会触发BFC属性，BFC相关的功能都会起作用。
- float属性的取值不为none
- position属性的取值为absolute或fixed
- display的值为inline-block,table-cell,table-caption之一
- overflow的取值不为默认值visible
- 元素为html根元素
此时该元素就像一个单独的渲染区域，基本不受外界元素的布局干扰，内部适用着属于BFC的一套布局规则。
BFC布局规则
- BFC可以看作是页面上一个隔离的独立容器，内外之间不会相互影响。
- BFC内部元素的布局基本规则即为普通流基本规则，同样也会发生高度塌陷。
- 浏览器计算BFC元素的高度时，也会计算浮动元素。
BFC常规应用场景
闭合元素内部浮动
由于BFC内部会计算浮动元素高度，只需要触发BFC属性即可闭合浮动。常用手段是设置overflow的值为 hidden。
实现两列自适应布局
由于BFC元素会与外部隔绝，可以通过左列浮动，右列触发BFC的方式实现两列自适应布局。
解决普通流布局中的塌陷问题
由于块级元素相邻并处于同一BFC时外边距会发生叠加，因此只需要对任意一个叠加div生成新的BFC属性即可。
总结
其实块级格式化上下文和之前说过的层叠上下文有异曲同工之妙，都是在HTML中一层套一层的结构方式，只是应用的规则不同而已，前者是针对元素的布局，后者是针对元素的视觉表现。掌握了这两种上下文，对CSS的处理一定会更加得心应手。
-- EOF --