Question

为什么内联块在浮动元素高于此浮动元素时不会环绕浮动元素？

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和inline elements的行为符合预期。

Answer 1

spec说

表的边框，块级替换元素或正常流程中的元素，用于建立新的块格式上下文（例如'溢出'除'可见'以外的元素）必须不重叠在同一块格式中任何浮点数的边距框上下文作为元素本身。

Block formatting context定义如下

浮动，绝对定位的元素，阻挡容器（例如非阻止的内联块，表格单元格和表格字幕盒子，以及“溢出”除“可见”以外的块盒（除了当该值已传播到视口时）建立新的阻止格式化其内容的上下文。

_{（强调我的）}

Answer 2

他们这样做。您的代码不正确。您的<div>代码未围绕<p>标记，并且您在<div>代码中设置了明确的高度，因此内容会溢出。

这样更好：

<div style="width: 400px; border: 1px dotted red; float: left;">
    <p style="display: inline-block; width: 50%;">Lorem Ipsum...</p>
</div>

为什么内联块不包围浮动元素？

2 个答案: