看到Block Formatting Context这个词语时，当时也是一头雾水，搜索了大量相关的资料后，对其有了一定的了解。对css的布局有了一个新的认识。
Block Formatting Context是要深入理解CSS的一个必须理解的概念。
简单地说，Block Formatting Context就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。不是所有的元素都会建立一个“Block Formatting Context“。只要符合条件，任何块级元素都建立一个新的”Block Formatting Context”, 一个” Block Formatting Context”至少满足以下条件之一。
- float:left
- float:right
- position:absolute
- display:inline-block
- display:inline-table
- display:table-cell
- display:table
- overflow:auto
- overflow:scroll
- overflow:hidden（也就是除了overflow:visible;）
Block Formatting Context怎样流动?
Block Formatting Context在文档流中属于正常流。也就是说，它跟块级模型、inline模型、盒模型的relative position、还有run in盒模型一样，属于页面文档流。
ps.与正常页面文档流相对应的，还有浮动和绝对定位（fixed是absolute的一个子集）。Block Formatting Context有什么用?
1.Block Formatting Context可以阻止边距折叠（margin collapsing）。
我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
2.Block Formatting Context可以包含内部元素的浮动
请run一下如下代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Demo</title>
-
<style type="text/css">
-
html, body {
-
margin: 0;
-
padding: 0;
-
}
-
</style>
-
</head>
-
<body>
-
<div style="background:blue; overflow:hidden; *zoom:1">
-
<p style="float:left; margin:20px">段落一</p>
-
</div>
-
<div style="background:blue;">
-
<p style="float:left; margin:20px">段落二</p>
-
</div>
-
</body>
-
</html>
以上是两个同样的DIV,设置了背景色为蓝色，但后一个DIV的背景颜色没有显示出来，为内部的浮动元素脱离了文档流，不受父元素的控制，那么父元素在文档流中是一个空标签，没有高度和宽度，也就不显示任何颜色；而第二个div由于生成了Block Formatting Context（通过overflow:hidden;触发）会包容住里面的浮动元素，这样容器才会有自己的宽度和高度（被子元素撑开），这样就会显示出颜色。
3.Block Formatting Context可以阻止元素覆盖浮动盒模型
规范说：Block Formatting Context的盒模型border外延（而不是margin外延，也就是说无视margin设置）不会覆盖周围的浮动盒模型margin外延。这就是说浏览器应该默默创建一个特定边距来阻止Block Formatting Context的盒模型border外延覆盖周围的浮动盒模型。出于此种原因，接在浮动元素后面的Block Formatting Context上设置的负边距应该是无效的（应该被浏览器默默创建的特定边距覆盖），不过对此-webkit浏览器和IE6会有不正确的理解，试试用不同的浏览器看看这个页面，webkit和IE6理解是不正确的，其余是正确的。
原文请看：http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts
下面分别介绍这3个性质。
性质一：Block Formatting Context会阻止边距折叠
This is a paragraph inside a DIV with a blue background, styled withmargin:20px.
This is a paragraph inside a DIV with a blue background, styled withmargin:20px.
前两个div里面的p的垂直边距折叠成了一个，而第三个div由于生成了Block Formatting Context（通过overflow:hidden;触发），不会使相邻的边距折叠。
性质二：Block Formatting Context可以包含内部元素的浮动
This paragraph is a float inside a DIV with a blue background, it is styled withmargin:20px
This paragraph is a float inside a DIV with a blue background, it is styled withmargin:20px. The parent DIV is styled withoverflow:hidden;zoom:1.
三个div同样都是设置了背景色为蓝色，但前一个div就没有显示出来，因为内部的浮动元素脱离了文档流，不受父元素的控制，那么父元素在文档流中是一个空标签，没有高度和宽度，也就不显示任何颜色；而第二个div由于生成了Block Formatting Context（通过overflow:hidden;触发），会包容住里面的浮动元素，这样容器才会有自己的宽度和高度（被子元素撑开），这样就会显示出颜色；第三个div同样因为生成了Block Formatting Context（通过float:left;触发），显示出颜色。
性质三：Block Formatting Context可以阻止元素覆盖浮动盒模型
这是非常给力的一个特性。规范说：Block Formatting Context的盒模型border外延（而不是margin外延，也就是说无视margin设置）不会覆盖周围的浮动盒模型margin外延。这就是说浏览器应该默默创建一个特定边距来阻止Block Formatting Context的盒模型border外延覆盖周围的浮动盒模型。出于此种原因，接在浮动元素后面的Block Formatting Context上设置的负边距应该是无效的（应该被浏览器默默创建的特定边距覆盖），不过对此-webkit浏览器和IE6会有不正确的理解，试试用不同的浏览器看看这个页面，webkit和IE6理解是不正确的，其余是正确的。
.sideBar { background: skyBlue; float: left; width: 180px; }
.sideBar { background: yellow; float: right; width: 180px; }
由于此种特性是赋予在border外延而不是margin外延上，那么如果希望上面的Block Formatting Context（也就是有border的那个盒子）左右两边出现边距，那么只有两种方法：
- 给Block Formatting Context设置一个超过两边浮动盒模型宽度的margin值，比如margin:0 220px;
- 在浮动元素上设置20px margin
ps.前一种方法在Chrome和IE6下跟别的浏览器表现不一。后一种方法在IE6/7下会出现双边距bug。 ps.border外延跟一个盒模型有没有设置border属性完全没有关系，只是从盒模型上无视margin而已。 ps.the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug.
hasLayout vs Block Formatting Context
你应该已经注意到了，上面的代码都是用overflow:hidden;*zoom:1来定义样式。这是因为这段代码为标准浏览器的对应盒模型生成了Block Formatting Context，为非标准的IE6/7则触发了hasLayout。hasLayout跟Block Formatting Context一样都可以阻止边距折叠、包含浮动元素、阻止元素覆盖浮动盒模型。 关于hasLayout，具体见hasLayout。
相关推荐
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，内容足够简洁明了。 本文的目的是介绍一些概念，来帮你增强 CSS 码力。如标题所示，这篇文章主要是讲 块级格式...
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建...
左列定宽，右列自适应 .left{width:100px;...BFC（Block Formatting Context）块级格式化上下文。它是一个独立的渲染区域，就是一个独立的容器，并且这个容器里box的布局与容器外的布局没有关系。 BFC的渲染规
我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能...
BFC的概念BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。...
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
Workaround: Change the datatypes of local variables in the anonymous call block back to national character set datatypes before clicking on the �OK� button. - Bug 4924432: Object names entered ...
Keyboard shortcuts A quick reference guide to UltraEdit's default keyboard shortcuts Keymapping and custom hotkeys How to customize 键映射s and menu hotkeys Column Markers The benefit of a column ...
Twitter Digg Facebook Del.icio.us Reddit Stumbleupon Newsvine Technorati Mr....Database » Database » Other databasesLicence CPOL ...Even faster Key/Value store nosql embedded database ...
- FIX Add moving block for first and last connector's segments also for non-orthogonal connectors. - FIX Class TPenProp rewrote without TPen delphi object. - FIX In some cases TFlexCurve.Paint ...
;;;;;;;;... 1.... 2.... 3.... 4.... 5.... 6.... The syntax of the file is extremely simple.... Section headers (e.g.... at runtime.... There is no name validation.... (e.g.... previously set variable or directive (e.g....