带浮动元素的div 100％的内容高度？

Question

为什么我的父母div“爸爸”没有把孩子的高度？ http://jsfiddle.net/MeHyJ/

<div id="dad"> 
    <div class="float">1</div> 
    <div class="float">2</div>  
    <div class="float">3</div>  
    <div class="float">4</div> 
</div> 

#dad { 

height:100%; 
width:100px; 
border:1px solid black; 
} 
.float { 
width:50px; 
height:50px; 
background-color:red; 
float:left; 
} 

Answer 1

使用display:inline-block而不是使用 float:left; clear:both;。

任务：找出显示之间的差：block/inline/inline-block;

DEMO & CODE

Answer 2

它是浮动元素的一个众所周知的问题。 你需要所谓clearfix方法：http://css-tricks.com/snippets/css/clear-fix/

#dad:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

或使一个类，你可以在后面的代码重用：

.clrfx:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

你更新DEMO

Answer 3

请更改ID的CSS #dad如下：

#dad { 
float:left; 
height:100%; 
width:100px; 
border:1px solid black; 
}