为什么高度:自动无法处理2个浮动元素？

Question

该div#inner1和div#inner2是内部的div#outer,但仍然高度div#outer显示为0像素带height: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

添加overflow:auto到id为div outer.这将解决您的问题.

演示

Answer 2

浮动外部div.这将覆盖你的所有高度,无论内在的高举是什么.但是,如果你将提供你的内部div浮动属性.然后我会建议你使用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;
}

试试这个肯定会有用