div с плавающими элементами 100% высота его содержимого?

Question

Почему мои родители делят «папу», не поднимают высоты своих детей? 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

Пожалуйста, измените CSS удостоверения личности #dad, как указано ниже:

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