包裹 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> 的外层 <div> 宽度为80px，因为每个内部 <div> 都是40px。但始终存在这样的问题：外层 <div> 的高度为0像素，使得边框看起来像是顶部的一条线。

所以我将两个内部 <div> 放入了一个 <table> 中，这样做效果不错。但是如何避免这个问题而不使用 <table>？

- Sarvap Praharanayuthan

---

可能是Which method of ‘clearfix’ is best?的重复问题。 - Oriol

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>

- Ana

---

我很好奇，为什么它一开始就会崩溃？ - HussienK

Answer 2

外层的 div 由于其内部的两个子元素 div 都是浮动的而导致发生了 折叠现象。最简单的解决方法是在外层的 div 上设置 overflow: hidden;。

- daGUY

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

- ow3n