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

Question

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

我查看了规范，并没有找到任何明确的解释。

此示例说明了有问题的行为（与 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

内联块元素为其内容建立新的块格式化上下文。如果自动调整大小，块格式化上下文根总是试图包含它的浮动；请参阅规范的第 10.6.7 节：

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

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