css-float - 为什么 `inline-block` 元素会自动清除他们的 child ？

Question

display: inline-block 用于许多 clearfixes(1，2)，尽管这些文章都没有解释为什么它使元素在其自身之后清晰。为什么会这样？

我仔细阅读了规范，但没有找到关于此事的任何明确解释。

这example说明了有问题的行为(在 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>

Answer 1

行内 block 元素建立新的block formatting contexts为他们的内容。如果自动调整大小， block 格式化上下文根总是试图包含它的 float ；见section 10.6.7规范的:

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.

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