为什么`inline-block`元素会自动清除他们的孩子？

Question

display: inline-block用于许多明确修正（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 formatting contexts。如果自动调整大小，则块格式化上下文根总是尝试包含其浮点数;请参阅规范的section 10.6.7：

  

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

这使得内联块能够包含其浮点数;实际上没有通关，因为在漂浮的孩子之后没有引入清算因素。