html - div高度不包括 child

Question

我的父 div 高度有问题。

里面没有 child 。

JSBIN:JSBin

问题的基础是:

我有这样的代码:

<div class="itemsContainer">
  <div class="left">
     --SOME STUFF--
  </div>
  <div class="right">
    --SOME STUFF--
  </div>
</div>

并且.itemsContainer计算出的高度不包含 child 的高度。

查看 JSBin 以获取更多代码。

你能给我一个提示吗，我该如何解决？

Answer 1

这是因为 floats 没有被清除。

方案一:

清除 float 。

HTML:

<div class="itemsContainer">
    <div class="left">
        --SOME STUFF--
    </div>
    <div class="right">
        --SOME STUFF--
    </div>
    <div class="clear"></div>
</div>

CSS:

.clear{clear:both;}

See DEMO.

解决方案2:

添加以下内容:

.itemsContainer{overflow:hidden;}

See DEMO.