包装器div高度为0,内部带有浮动元件

Question

我有一个包装器<div>,其中包含两个<div>浮动的内部.

<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.但总是包装<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>

Answer 2

外部div正在坍塌,因为div它内部的两个孩子正在漂浮.对此最简单的解决方法是设置overflow: hidden;外部div.