HTML float从div中删除div

Question

所以我有一个主要的div，里面有另外两个div。当我将style="float:left;width:50%"放在主div内的两个div内时。两个div脱离主div。请参见下面的代码。

<div class="content">
  <h1>Title</h1>
   <div style="float:left;width:50%">
     <p>Some Text</p>
   </div>
   <div style="float:left;width:50%";
     <p>Some other Text</p>
   </div>
</div>

因此，当我在浏览器中对其进行检查时，它显示<div class="content">仅包括<h1>，但另外两个div不在其内。所以它们溢出了！当我将overflow:auto放到内容div中时，它们就会包含在内。

为什么会这样？