为什么不用内嵌块环绕浮动元素？

当浮动元素高于浮动元素时，为什么不用内嵌块环绕浮动元素？为什么不用内嵌块环绕浮动元素？

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像预期的那样。

来源

2014-09-01 user3790069

如果你想让它包裹，你为什么要更改默认的块级上下文？ – 2014-09-01 17:39:33

@Paulie_D我想从理论上理解浮动的行为 – user3790069 2014-09-01 18:18:45

的spec说作为一个元素，例如

表，块级替换元件，或在其建立一个新的块格式化上下文（正常流动的元件的边界框与'可见'以外的'溢出'）必须不重叠保证金框任何浮动在相同的块格式上下文作为元素本身。

而一个Block formatting context这样定义

浮标，绝对定位元素，块容器（如 直列块，表细胞，和表字幕）不在块框和“可见”以外的“溢出”的块框（当该值已传播到视口时除外）为其内容建立新的块格式上下文。

_{（重点煤矿）}

来源

2014-09-01 17:43:52 Oriol

@ user3790069那么，我链接的规范是CSS 2.1，它被CSS3模块取代。它可以根据新的内容标准进行定义，但我通过链接CSS 2.1规范会更好，因为它更简单，并且由于向后兼容性而仍然适用。另请注意[block-level]（http://www.w3.org/TR/css3-box/#block-level）和[inline-level]（http://www.w3.org/TR/css3） -box /＃inline-level）框在[CSS基本框模型]（http://www.w3.org/TR/css3-box/）中定义。 – Oriol 2014-09-02 11:23:56

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

来源

2015-10-08 16:10:59

这并没有解决被问到的真正问题 – 2016-10-10 18:12:12

为什么不用内嵌块环绕浮动元素？

回答

相关问题