为什么“inline-block”元素会自动清除它们的子元素？

display: inline-block用于许多clearfixes（1 http://css-tricks.com/snippets/css/clear-fix/, 2 http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/），尽管这些文章都没有解释为什么它使元素本身变得清晰。为什么会这样呢？

我浏览了规范，但没有找到关于此事的任何明确解释。

This example http://jsfiddle.net/4dbrr/说明了相关行为（在 IE9 以及最新版本的 Chrome 和 Firefox 中一致）：

<div style="display: inline-block;">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

<hr/>

<div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

内联块元素建立新的块格式化上下文 http://www.w3.org/TR/CSS21/visuren.html#block-formatting为他们的内容。如果自动调整大小，块格式化上下文根总是尝试包含其浮动；看第10.6.7节 http://www.w3.org/TR/CSS21/visudet.html#root-height规格：

此外，如果该元素有任何浮动后代，其底部边距边缘低于该元素的底部内容边缘，则高度会增加以包含这些边缘。

这就是内联块能够包含其浮动的原因；实际上不涉及清除，因为在浮动子项之后没有引入清除元素。