关于BFC的一些应用

关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有不少关于此的介绍，后面也罗列了些我的认为很不错的文摘。

那今天要说的是关于它的一些技巧性应用，经过示范比较常会接触到的排版布局方面的需求来讲明下。

BFC实例

左中右布局的自动扩容

这是一个比较常见的布局需求，以下，这是一个表单里面的其中一行，想下怎么排呢？

好了，这时候需求有变更了，还须要增长些东西，就变成了这样：

唔，这会看到后面发现，还有这样子的：

虽然，有其余办法来实现这样的效果，那是否有更轻巧的实现方式呢？那就是BFC啦，经过BFC能够实现自动扩容的效果，就是你怎么加都行（点这里看线上例子）。

复杂背景下的目录线实现

这个，看着是否是特别的熟悉：

这种类word的目录结构，脑海里已经将它切好了。按照一般的作法是，背景纯色背景，那标题文字直接应用同色背景便可，简单快捷方便。

不过，看到下面的是否是要悲剧了，点这里能够看线上的：

这种就不仅仅只是填个背景了~~你想到什么更好的办法来处理了吗？

这里抛出多一个问题，直接上图，看下面的图：

有没注意到后面多出来的类橙色的一截，这截东西是什么？（Chrome下能够inspect到，Firefox没有）

这个多余的东西加上线的长度就等于父级的宽度（这个线没有设置width，且为block level的元素）

这是在《CSS权威指南》一书，第7章节水平格式化这一小节的时候了解到的。

潜在问题

• 不是全部东西都是完美的，BFC也不例外，在提供了轻巧灵活的排版布局的同时，也带了较大的潜在问题，那就是overflow了，都知道这个属性的反作用，超出范围裁减，也就是实现BFC的时候，要考虑到若是有绝对定位或者须要经过偏移调整位置实现特殊效果的需求，那么这会个很头疼的问题。

• 对于结构有一点要求，触发的元素必须位于最后一位。

参考连接

• 前端精选文摘：BFC 神奇背后的原理

• 深刻理解BFC和Margin Collapse

• 那些年咱们一块儿清除过的浮动

• 什么是BFC

• 说说标准