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