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

Question

我有一个包装器<div>，其中包含两个<div>浮动的内部 s。

<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高度上，这使得边框看起来像顶部的一条线。

所以我把两个 inner <div>s 放在了 a<table>中。它运作良好。但是我如何避免这个问题而不去 a <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.

Answer 3

尝试这个：

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