CODEWITHSUNDEEP
csscss-float
user3790069
user3790069

Reputation:

Why don't inline-blocks wrap around floating elements?

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.

Upvotes: 4

Views: 1043

Answers (1)

Oriol
Oriol

Reputation: 288700

The spec says

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.

And a Block formatting context is defined like this

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.

(Emphasis mine)

Upvotes: 3

Related Questions