html - Div 不包含内容

Question

我有一个 div，里面有 2 个其他 div。最外层 div 的边框不包含 2 个内容 div。为什么是这样？

<div id="baseDetails" style="top:1011px;left:476.5px;width:510px;border:2px brown solid;">
  <div id="baseTab" style="float:left;width:180px;margin:0 auto;border-right:1px solid #bbb;padding:10px;margin-right:20px;">
    <div>
      <h5>BASE DATA</h5>
      <dl>
        <dt>Base location:</dt>
        <dd>UK</dd>
        <dt>ID:</dt>
        <dd>0065</dd>
      </dl>
    </div>
    <div>
      <h5>DETAILS</h5>
      <dl>
        <dt>Gender:</dt>
        <dd>Male</dd>
        <dt>Date of Birth:</dt>
        <dd>1763</dd>
        <dt>Place of Birth:</dt>
        <dd>Manchester</dd>
        <dt>Occupation:</dt>
        <dd></dd>
        <dt>Date of Death:</dt>
        <dd>1823</dd>
        <dt>Place Interred:</dt>
        <dd>Liverpool</dd>
      </dl>
    </div>
    <div>
      <h5>PLACES:</h5>
      <dl><dt>No Data:</dt>
        <dd>BIRTH - 1823</dd>
      </dl>
    </div>
  </div>
  <div id="bio_div" style="width:230px;display:inline;padding:10px;margin:20px;">
    <h5 id="bio">BIOGRAPHY</h5>
    <div id="bio_main" style="column-count:1;">We have no details for this person.<br>If you can help, please provide biographical information to the manager for inclusion.</div>
  </div>
</div>

标签： htmlcss

Answer 1

这是因为外部内部的所有内容div都是浮动的。添加overflow: auto;到<div id="baseDetails">