为什么`inline-block`元素自动清除自己的孩子？ [英] Why do `inline-block` elements auto-clear their children?

问题描述

display：inline-block 用于多个clearfix（作为其内容。块格式化上下文根总是尝试包含其浮动（如果自动调整大小）请参阅规范的第10.6.7 节：

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

这就是为什么内联块能够包含它的浮动。没有清除实际上涉及，因为在浮动的孩子后没有引入清除元件。

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>

解决方案

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.

这篇关于为什么`inline-block`元素自动清除自己的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！