css - 包装器 div 高度为 0，内部有 float 元素

Question

我有一个包装器 <div>其中包含两个内部 <div> s 是 float 的。

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

问题是包装器 <div>宽度为 80px，因为两个内部 <div>每个都是 40px。但总是 wrapper <div>是0px高度使边框在顶部看起来像一条线。

所以我把两个内<div>在 <table> 里面.它运作良好。但是如何在不使用 <table> 的情况下避免这个问题？ ？

Answer 1

在父级上设置overflow: hidden。

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>