CSS 플로트 및 자동 높이

Question

하위 요소가 float:left; 또는 float:right 일 때 부모 요소에 height:auto;을 얻는 방법?

부모

#parent { 
    width:100px; 
    height:auto; 
     padding-bottom:10px; 
     background:#0F0; 
} 

child_left

#child_left { 
    width:50%; 
    height:50px; 
     float:left; 
      background:#00F; 
} 

바이올린 : http://jsfiddle.net/27EWw/

Answer 1

요소의 기본 높이가 auto,하지만 당신은 clearfix 찾고있는 것처럼 보인다. 요소의 자식이 플로팅되면 기본적으로 문서의 흐름에서 벗어납니다. 따라서 부모가 정의 된 차원을 가지지 않으면 자체적으로 축소됩니다. 당신은 부모 요소에 overflow:auto를 추가 할 수

EXAMPLE HERE

#parent { 
    width:100px; 
    overflow:auto; 
    padding-bottom:10px; 
    background:#0F0; 
} 

은 또한 당신은 또한 clearfix을 사용할 수

EXAMPLE HERE

#parent:after { 
    clear:both; 
    display:table; 
    content:''; 
} 

당신은 또한 clearfix 클래스를 가질 수 중 옵션이 작동합니다. 이러한 옵션을 사용하지 않으려면 먼저 상위 요소의 치수를 설정해야합니다. 어떤 요소는 다양한 크기의 하위 요소를 갖기 때문에 분명히 이것이 항상 최상의 옵션은 아닙니다.