BFC、IFC的概念重要吗？不重要，没有它们我们也能写出符合要求甚至很好的页面。重要，深入了了解了CSS这门语言的核心，你的CSS才可能会有创造性，你才能发明出你自己的奇淫技巧，而不是遇到新的情境就去百度，google。
在看这篇文章之前，先得了解一些无聊的基本概念，重拾CSS规范之从盒类型谈起，当然，我已经尽可能让它有趣了。
FC
FC（Formating Context，格式化上下文） 是一个布局的环境，它里面的盒子需要遵循FC这套体系的规则， CSS2.1 中定义了 BFC（Block Formating Context，块级格式化上下文） 和 IFC（Inline Formating Context，内联格式化上下文）， BFC 讲的是块级盒子的布局规则， IFC 讲的是内联级盒子的布局规则。
BFC
脱离特性讲定义都是流氓！！！光看个定义不好使，赶紧来捋一捋 BFC 的家规吧。
1. 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。
这里只说明了一点： 如何触发BFC！（很重要啊，多练多记忆，一定要熟稔于心）
2. 在一个块格式化上下文中，从包含块的顶部开始，盒在竖直方向一个接一个地放置。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
关于 margin 合并的问题，我在这篇文章里面已经描述的很详细了：重拾CSS规范之margin
透过下面的DEMO来看看如何阻止 margin 合并：
margin 一文中 margin合并规则 中写到了这么一句话，新建了块格式化上下文的元素不会与它的子元素的 margin 合并，所以 .wrap 元素就不会合并 .first 元素的 bottom margin 了，也就无法与 .second 元素发生 margin 合并了。
而且我们可以发现， BFC 就是一个密闭的容器 ， BFC 里面的元素无法对外界元素在布局上产生直接的影响。（为什么我要用‘直接’呢，因为它完全可以撑开 BFC 元素，来‘挪动’外界元素的位置）
那我们再考虑一个问题， 产生了新的 BFC 的盒会与它的兄弟盒产生 margin合并 吗？
当然是会的。
3. 在一个块格式化上下文中，每个盒的left外边挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
这里主要涉及到的就是多栏自适应布局的应用了。
如果要控制两者之间的间距，最好对 .left 元素使用 margin-right 。因为如果对 .center 元素使用 margin-left 的话，首先 margin-left 值必须要超过 .left 元素的宽度值，否则无法体现作用；再者对 .center 元素设置 margin-left 了，不就又回到了流体自适应布局了吗！
4. 在计算生成了 BFC 的元素的高度时，其浮动子元素应该参与计算。
几年前我技术很差的时候总在疑惑，float元素没法撑开父元素高度，但是为什么给父元素增加设置不为 ‘none’ 的 ‘overflow’ 值就可以了，现在总算是解开谜题了。。。
IFC
上一篇文章中已经提到了很多 IFC 相关的知识，这次再补充一点。
IFC 中的盒子与 BFC 中的不同的是，它们可以水平依次放置。
IFC中的行盒的宽度是包含块的宽度减去 float 元素（如果有的话）的宽度，行盒高度是最高的盒的top与最低的盒的bottom之间的距离。
内联盒的高度是由line-height决定的，而可替换元素，inline-block，inline-table 元素的高度则是由它们的 margin 盒高度决定的。
关于行高的计算后面会有较大篇幅的文章来介绍，敬请期待！
‘display’，’position’与’float’之间的关系
如果’position’值为’absolute’或者’fixed’，或者’float’值不为’none’，或者该元素是根元素，那么display就根据下表来设置。
同时设置’absolute’或者’fixed’、非 ‘none’ 的 float，float 会被覆盖为 ‘none’。
| 指定值 | 计算值 |
|---|---|
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| 其它 | 与指定值相同 |