div高不包括儿童

Question

我的父母div高度有问题。

它不包含儿童。

JSBIN：JSBin的问题

基本是：

我有这样的代码：

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

而且.itemsContainer计算高度不包含儿童的身高。

看看JSBin的更多代码。

你能给我一个提示，我该如何解决这个问题？

Answer 1

它发生，因为floats没有被清除。

解决方法1：

清除浮动。

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.

Answer 2

在子div完成后像下面那样清空你的float元素。

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

Updated JSBin