HTML：浮點數：左和相對位置

Question

當我使用float：left和另一個具有相對位置的div塊時，第二個塊的行爲意外 - 文本超出框和背景顏色。這裏發生了什麼？

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