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

【问题标题】：Wrapper div height is 0 with floated elements inside包装器 div 高度为 0，内部有浮动元素
【发布时间】：2015-03-02 01:45:10
【问题描述】：

我有一个包装器 <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，这使得边框在顶部看起来像一条线。

所以我将两个内部<div>s 放在<table> 中。它运作良好。但是如果不使用<table>，我该如何避免这个问题呢？

【问题讨论】：

Which method of ‘clearfix’ is best?的可能重复

标签： css html css-float

【解决方案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>

【讨论】：

我很好奇它为什么会这样崩溃？

【解决方案2】：

外部div 是collapsing，因为其中的两个子divs 是浮动的。最简单的解决方法是在外部div 上设置overflow: hidden;。

【讨论】：

【解决方案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

【讨论】：