首页 > 代码库 > 我所了解的BFC
我所了解的BFC
BFC：Block Formatting Context，也就是我们俗称的块格式化上下文，是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下的方式对其子元素进行排列：
1.元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于‘margin‘ 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。
2.元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。
什么情况下会创建BFC呢？
CSS 规范说明了在下列这些情况下会创建新的block formatting context：
1.浮动元素（float: left | right）；
2.绝对定位元素（position: absolute | fixed）；
3.行内块元素（display: inline-block）；
4.表格的单元格（display: table-cells，TD、TH）；
5.表格的标题（display: table-captions，CAPTION）；
6.‘overflow‘ 特性不为visible 的元素（除非该值已经传播到viewport?）；
7.表格元素创建的"匿名框"
BFC的主要特征
BFC主要用处是清除浮动，以及实现多栏布局
在 IE6 IE7 IE8(Q) 中只有hasLayout 特性，而没有BFC的概念。IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（has layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制
如果为了兼容IE8-，必须要么同时启动BFC和hasLayout，要么都不启动
我所了解的BFC