BFC

Ba la la la ~ 读者朋友，你们好啊，又到了冷锋时间，话不多说，发车！

---

一、BFC是什么？

BFC（Block Formatting Context）直译为“块级格式化范围”。是W3C CSS 2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

另一个通俗点的解释是：在普通流中的Box(框)属于一种formatting context(格式化上下文)，类型可以是block，或者是inline，但不能同时属于这两者。并且，Block boxes(块框)在block formatting context(块格式化上下文)里格式化，Inline boxes(块内框)则在inline formatting context(行内格式化上下文)里格式化。任何被渲染的元素都属于一个box，并且不是
block，就是inline。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的block boxes或者inline boxes。所以上面的描述，即是把所有的元素划分到对应的formatting context里。

二、其一般表现规则，我整理了以下这几个情况：

1、在创建了Block Formatting Context的元素中，其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。

根据CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。

根据CSS 2.1 8.3.1 Collapsing margins 第三条，生成block formatting context的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。

---

2、在Block Formatting Context
中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的
Block Formatting Context
。

---

3、Block Formatting Context就是页面上的一个隔离的独立容器，容器面的子元素不会在布局上影响到外面的元素，反之也是如此。

---

4、根据CSS 2.1 9.5 Floats中的描述，创建了Block Formatting Context的元素不能与浮动元素重叠。

表格的border-box、块级的替换元素、或是在普通流中创建了新的block formatting context（如元素的'overflow'特性不为'visible'时）的元素不可以与位于相同的block formatting context中的浮动元素相重叠。

---

5 、当容器有足够的剩余空间容纳BFC的宽度时，所有浏览器都会将BFC放置在浮动元素所在行的剩余空间内。

---

6、 在IE6 IE7 IE8 Chrome Opera中，当BFC的宽度介于"容器剩余宽度"与"容器宽度"之间时，BFC会显示在浮动元素的下一行；在Safari中，BFC则仍然保持显示在浮动元素所在行，并且BFC溢出容器；在Firefox中，当容器本身也创建了BFC或者容器的'padding-top'、'border-top-width'这些特性不都为0时表现与IE8(S)、Chrome类似，否则表现与Safari类似。经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。

---

7、 在IE6 IE7 IE8 Opera中，当BFC的宽度大于"容器宽度"时，BFC会显示在浮动元素的下一行；在Chrome Safari中，BFC则仍然保持显示在浮动元素所在行，并且BFC溢出容器；在Firefox中，当容器本身也创建了BFC或者容器的'padding- top'、'border-top-width'这些特性不都为0时表现与IE8(S)类似，否则表现与Chrome类似。经验证，最新版本的浏览中只有
firefox会在同一行显示，其它浏览器均换行。

---

8、根据CSS2.1规范第
10.6.7部分的高度计算规则，在计算生成了
block formatting context的元素的高度时，其浮动子元素应该参与计算。

---

以上为个人意见，如有雷同，纯属巧合，欢迎大家多提意见！Bey 了 个 Bey ~