看到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。
相关推荐
2. **溢出处理**：`overflow`属性可以创建Block Formatting Context，当设置为`hidden`、`scroll`或`auto`时，元素的溢出内容会被隐藏，且内部的Block Formatting Context将独立于外部环境。 3. **边距折叠**：在...
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
Block Formatting Context（BFC）是一种独立的渲染区域，只有 Block-level box 参与。它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。 BFC 的布局规则： A. 内部的 Box 会在垂直方向，一...
BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting ...
BFC 是 Block Formatting Context 的缩写，指的是页面上一个独立的容器，容器内部的子元素不会影响到外部的元素。BFC 的区域有一个独立的块级渲染区域，该区域有一个套渲染规则来约束盒子的布局，与外部的区域没有...
Block Formatting Context是CSS布局中的一个重要概念，它定义了一块独立的渲染区域，其中的元素布局规则与其他区域不同。BFC是普通流的一部分，但它具有独立性，其内部元素不会影响到外部元素。 **三、触发BFC的...
在IT行业中，尤其是在Web前端开发领域，理解和掌握Block Formatting Context（BFC）以及表格布局是至关重要的技能。这里，我们详细探讨这两个知识点，并结合浮动塌陷这一相关概念，以帮助你深化理解。 Block ...
#### BFC (Block Formatting Context) 和 IFC (Inline Formatting Context) - **BFC (Block Formatting Context)**: 块级格式化上下文，定义了内部的块级元素如何布局以及与外部的关系。例如，块级元素默认独占一行...
在讨论元素高度时，我们还需要了解IFC（Inline Formatting Context）和BFC（Block Formatting Context）。IFC是行内元素布局的环境，它决定了行内元素如何在同一行内排列。而BFC则是块级元素布局的环境，它创建了一...
1. BFC（Block Formatting Context）的实现方式：BFC 是 CSS 布局中的一种 formatting context。 2. 垂直居中的方式：使用Flexbox、Grid、absolute positioning 等方法。 五、概率论与数学 1. 概率论基本概念：...
1. 定义：BFC（Block Formatting Context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。 布局规则： ...
本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，内容足够简洁明了。 本文的目的是介绍一些概念，来帮你增强 CSS 码力。如标题所示，这篇文章主要是讲 块级格式...
2. BFC（Block Formatting Context，块级格式化上下文） BFC是Web页面的可视化CSS渲染的一部分，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到页面布局时，了解和运用BFC是非常重要...
BFC（Block Formatting Context）是 CSS 中的一个概念，指的是一个独立的渲染区域，使得内部元素和外部元素相互隔离，不会相互影响。BFC 可以通过 display:inline-block、position:absolute/fixed 等方式产生。 ...
- **`Block Formatting Context (BFC)`** 是W3C CSS 2.1规范的一部分，它定义了块级元素如何对其内容进行定位，以及与其他元素之间的关系。创建BFC的常见方法包括浮动元素、绝对定位元素、`display: inline-block`、...
2. BFC（Block Formatting Context）： BFC 是什么？BFC 是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成 BFC 的条件： * 浮动元素，float 除 none 以外的值 * ...