Why do `inline-block` elements auto-clear their children?

问题

display: inline-block is used in a number of clearfixes (1, 2), though none of those articles explain why it makes an element clear after itself. Why is it so?

I've looked through the spec, and haven't found any definitive explanation on that matter.

This example illustrates the behavior in question (consistent in IE9, and the latest versions of Chrome and 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>

回答1:

Inline-block elements establish new block formatting contexts for their contents. A block formatting context root always tries to contain its floats if sized automatically; see section 10.6.7 of the spec:

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.

This is what makes an inline block able to contain its floats; no clearance is actually involved since no clearing element is introduced after the floating children.

来源：https://stackoverflow.com/questions/19935045/why-do-inline-block-elements-auto-clear-their-children