html - 为什么 height:auto 不适用于 2 个浮动元素？

Question

div#inner1和在div#inner2内，但仍然显示为 0pxdiv#outer的高度和.div#outerheight:auto

如何获取外部 div 的子元素的高度？

这是我的代码：

#outer {
  width: 300px;
  height: auto;
  background: #ccc;
}

#inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

#inner2 {
  float: left;
  width: 100px;
  height: 100px;
  background: #0f0;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

Answer 1

使用 id添加overflow:auto到 div 中outer。这将解决您的问题。

演示

Answer 2

Float the outer div. that will cover your all height, whatever the inner divs holding heights. But if you will provide your inner div float property. then i will suggest you to use the hack clearfix..

    /* Assuming this HTML structure:

    <div class="clear">
        <div class="floated"></div>
        <div class="floated"></div>
        <div class="floated"></div>
    </div>
*/

.clear:before, .clear:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clear:after {
    clear: both;
}

try this it will sure work