HTML：浮動小数点：左および相対位置

Question

float：leftのdivブロックと相対位置のdivブロックを使用すると、2番目のブロックが予期せず動作します。テキストはボックスとその背景色を超えます。ここで何が起きてるの？

https://jsbin.com/merehowoxa/1/edit?html,output

 #first-section{ 

      color:black; 
      background-color:pink; 
      width:100px; 
      float:left; 

     } 

     #second-section{ 

      color:purple; 
      background-color:yellow; 
      width:100px; 
      height:100px; 
      position:relative; 
      left:500px; 
      top:200px; 

     } 

Answer 1

あなたはフロートを使用するたびに：左が、それはクリアする必要があります。

の間にこれを追加両方のあなたのdivの

<div id="first-section"> 

     <p>Text1</p> 
     <p>Text2</p> 

    </div> 

    <div style="clear:both"> 

    <div id="second-section">