为什么内联块不包围浮动元素？ [英] Why don't inline-blocks wrap around floating elements?

问题描述

为什么当浮动元素高于此浮动元素时，inline-blocks不会包围浮动元素？

Why don't inline-blocks wrap around floating elements when they are higher than this floating element?

div {
    height: 3em;
    width: 3em;
    border: 1px dotted;
    float: left;
}

p {
    display: inline-block;
    width: 90%;
}

<div></div>
<p>In metus tortor, tristique imperdiet ultrices quis, cursus in tellus. Nunc lacinia tristique purus, ut pretium justo eleifend tempor. Ut dictum ac ex ut molestie. In posuere lacus ac volutpat consectetur. Donec pharetra eu lectus a luctus. Morbi et cursus orci. Donec a scelerisque magna. Morbi a vulputate risus. Nunc volutpat est non ipsum porttitor rutrum. Aliquam eu tortor quis ligula fermentum rutrum. Aenean nibh tellus, varius sit amet posuere quis, efficitur in quam. Cras fringilla tortor sit amet nibh lacinia rhoncus. Quisque orci quam, feugiat at auctor maximus, vestibulum a velit.</p>

块和内置元素的行为与预期一致。

Blocks and inline elements behave as expected.

推荐答案

spec 说

表的边框，在正常流程中建立新的块格式化
上下文（例如具有'overflow'而不是'visible'的元素）的普通流中的
元素必须
不重叠在与元素本身相同的块格式化
上下文中任何浮点的边框框。

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

和封锁格式化上下文定义为这样

浮动，绝对定位的元素，块容器（例如
不会阻塞
盒的块和具有'visible'除了'visible'的块方框（除了
，当值已经被删除时，不是inline-blocks ，table-cells和table-caption）传播到视口）为其内容建立新的
块格式化上下文。

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

_sub>

_{(Emphasis mine)}

这篇关于为什么内联块不包围浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！