浮動小数点2（またはそれ以上）のdivはどのように動作しますか？

Question

（Chromeデベロッパーツールに見られるように）.However私は、float:leftにフローティング#p1周り#p2ラップのコンテンツのみを#p1を設定していない場合div#p2選択図div#p2のみブラウザの左端から存在すると思われます両方ともdivs〜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>

Answer 1

CSS 2.1仕様に記載precise rules for floatsとしては、点2で述べている：

現在のボックスがされた場合

左フローティング、以前のソース文書内の要素によって生成された左フローティング ボックスはそれぞれ、このような以前のボックス、次いで、存在する、いずれかの現在のボックス の左側外縁前のボックスの右端の右側にあるか、または の先頭が前のボックスの下端よりも低くなければなりません。類似の ルールは右浮動ボックスで保持されます。

したがって#p2浮動小数点の場合#p1を避けるようにします。フローティングされていない場合、#p1の存在は無視されます。しかし、#p2に含まれるラインボックスは、浮動小数点型#p1を避け、#p2の高さがそのラインボックスを含むのに十分なほど大きくなる原因となります。