float된 요소의 높이를 인지하지 못할 때..

float된 자식 요소들을 감싸는 부모 요소에 다음과 같이 CSS코드를 추가해 줍니다.

overflow: hidden;

<!--  /* flaot된 자식요소 높이를 인지 못하게 되는거 막기 = overflow: */  -->
<!-- /* ie6해결 = zoom */ -->

<div style="background:gray; padding:50px; overflow:hidden;  zoom:1; ">
<div style="width:100px; height:100px; background:red; float:left;">float:left;</div>
<div style="width:100px; height:100px; background:red; float:right;">float:right;</div>
</div>

1) float된 자식 요소의 높이를 인식하지 못하는 부모 요소

2) 부모 요소에 overflow:hidden 를 이용해, 적용처리

IE6에서는 zoom:1;를 추가해 줘야 최종적으로 해결이 된다.