플로팅 요소가있는 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

float:left; clear:both;을 사용하는 대신 display:inline-block을 사용하십시오.

작업 : 디스플레이 차이 파악 : 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 { 
float:left; 
height:100%; 
width:100px; 
border:1px solid black; 
}