关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。
那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。
BFC实例
左中右布局的自动扩容
这是一个比较常见的布局需求，如下，这是一个表单里面的其中一行，想下怎么排呢？
好了，这时候需求有变动了，还需要增加些东西，就变成了这样：
唔，这会看到后面发现，还有这样子的：
虽然，有其他办法来实现这样的效果，那是否有更轻巧的实现方式呢？那就是BFC啦，通过BFC可以实现自动扩容的效果，就是你怎么加都行（点这里看线上例子）。
复杂背景下的目录线实现
这个，看着是不是特别的熟悉：
这种类word的目录结构，脑海里已经将它切好了。按照通常的做法是，背景纯色背景，那标题文字直接应用同色背景即可，简单快捷方便。
不过，看到下面的是不是要悲剧了，点这里可以看线上的：
这种就不单单只是填个背景了~~你想到什么更好的办法来处理了吗？
这里抛出多一个问题，直接上图，看下面的图：
有没注意到后面多出来的类橙色的一截，这截东西是什么？（Chrome下可以inspect到，Firefox没有）
这个多余的东西加上线的长度就等于父级的宽度（这个线没有设置width，且为block level的元素）
这是在《CSS权威指南》一书，第7章节水平格式化这一小节的时候了解到的。
潜在问题
不是所有东西都是完美的，BFC也不例外，在提供了轻巧灵活的排版布局的同时，也带了较大的潜在问题，那就是
overflow了，都知道这个属性的副作用，超出范围裁减，也就是实现BFC的时候，要考虑到如果有绝对定位或者需要通过偏移调整位置实现特殊效果的需求，那么这会个很头疼的问题。对于结构有一点要求，触发的元素必须位于最后一位。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。