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

本文介绍了为什么`inline-block`元素自动清除自己的孩子？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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:

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`元素自动清除自己的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！