爲什麼不用內嵌塊環繞浮動元素？

當浮動元素高於浮動元素時，爲什麼不用內嵌塊環繞浮動元素？爲什麼不用內嵌塊環繞浮動元素？

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

爲什麼不用內嵌塊環繞浮動元素？

回答

相關問題