OverFlow:一个秘密武器

如果你已经理解了block formatting contexts那么请继续，否则请先看看这篇文章。

Overflow能够做一些很牛掰的事情，比如:

• 创建BFC (block formatting contexts via W3c css2.1)

• 清除浮动

生成块级元素

overflow属性一旦被指定，那么一个新的BFC就被创建了。这意味着什么呢？它改变了block和浮动元素的交互方式。它不再围绕浮动元素，而是变成一个narrower。

[P没有用overflow]你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免 不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。

[P有用overflow:hidden]你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免 不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。

这不是一个hack，在w3c标准中有明确的说明：

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

那么该如何学以致用呢？

拥有新FC( formatting context)的块级元素会占去一行中所有的剩余空间，只给定位了的浮动元素留下空间。在原文作者的开源项目OOCSS中，有两种方式去使用FC：

主内容列 -添加FC意味着主内容列将占去除左右列之外的所有空间。这意味着，在一个模板下，只需简单的删除多余的那列，不用做其它任何更改你就可以很轻易的将布局从三列变为两列。CMS开发者会非常喜欢这个特性的。

在Firebug下玩玩这个模板。

1. 试着将“liquid”class增加到“page”元素中。

2. 从HTML中添加或删除一列。

3. 用文档中列出的附加class去扩展一个列对象。

4. 尝试在Firebug中直接改变列的宽度。

网格 -任何开发过网格系统的人都知道sub-pixel舍入错误所带来的痛苦。浏览器不知道如何处理33.3像素，所以他们都会做不同的事情。YUI利用“列”之间的“槽”解决了这一差异，但我们也可以在单元内部隐藏这一差异。

一个新的BFC可以用来隐藏网格任何一列最后一个单元的尺寸误差。试试这个网格，你会发现当你修改单元的尺寸时，最后的单元会自动伸缩，以适应差异。它没有宽度，而且如果拥有新的BFC，它也不会环绕浮动元素。

清除浮动

你肯定听说过清除浮动这码事。人们一直在探讨通过overflow的属性来清除浮动 。有些人认为它是hack，但仔细阅读规范你会发现，规范作者也没能明确它。因为它的最终解释权归浏览器厂商。为了计算出什么溢出了容器（这些范围应该被隐藏），他们需要知道块的大小。由于这些块都没有给出明确的高度设置，于是浏览器就使用了从块内容中计算出的高度。欲了解更多关于清除的内容 ，请看我和Eric Meyer在他博客里的讨论。

注意事项

溢出可以太大内容（如巨大的图片，pre区域，或表格之类），我现在尝试overflow: auto，到底使用哪个还需要权衡。

PS: 终于把这篇文章放出来了，其实已经躺在我电脑里好久了，当初答应 * 翻译的 ，结果拖了这么久实在惭愧。水平所限，文中还有些地方译的很牵强，或者不好理解，希望大家能帮忙指正。

原文地址：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/