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