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

前端 未结 1 1155
囚心锁ツ
囚心锁ツ 2021-01-14 22:15

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?<

1条回答
  •  小蘑菇
    小蘑菇 (楼主)
    2021-01-14 22:38

    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.

    0 讨论(0)
提交回复
热议问题