浮動2（或更多）div如何工作？

Question

當我設置#p1到float:left，只有浮動#p1而不是相反的#p2包裹內容div#p2 .The div#p2似乎只從瀏覽器的左邊緣存在（如Chrome開發者工具看到的）。但是，當我同時設置div div至float:left，內容以及容器相互纏繞。爲什麼？

#p1 { 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#p2 { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    float: left; 
 
}

<title>Floating Divs</title> 
 
<h1>Floating Divs</h1> 
 
<div> 
 
    <div id="p1">DIV</div> 
 
    <div id="p2">DIVDIVDIV</div> 
 
</div>

#p1 { 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#p2 { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    width: 100px; 
 
}

<title>Floating Divs</title> 
 
<h1>Floating Divs</h1> 
 
<div> 
 
    <div id="p1">DIV</div> 
 
    <div id="p2">DIVDIVDIV</div> 
 
</div>

如在CSS 2.1規範在點2表示描述

Answer 1

precise rules for floats的：

如果當前框是左浮置，並且有由元件較早源文檔中生成的任何向左浮動 盒，然後 每個這樣的早期中，或者當前框 的左外邊緣必須在早期盒子的右邊緣右側，或者其頂部必須低於早期盒子的底部。類似的 規則適用於右浮動框。

所以#p2當它浮動時將避免#p1。當它不漂浮時，它將忽略#p1的存在。但是，#p2中包含的線框避免浮動的#p1，導致#p2的高度增長到足以允許其包含該線框。