浮动元素移出父元素

Question

当我浮动span元素时，为什么它要离开父元素div但没有浮动却停留在div内？谢谢

div {
  border: 1px solid red;
  width: 500px;
}

<div>
  <p>This paragraph has an inherited left margin (from the div 
  element).</p>
  <span style="float:left">Test data</span>
</div>