[CSS] Clearfix Hack

Clearfix 는 CSS에서 부모 요소가 자식 요소의 float로 인해 제대로 높이를 계산하지 못하는 문제를 해결하기 위해 사용되는 기법이다. float 속성을 설정한 요소가 있을 때, 부모 요소는 해당 자식의 요소의 높이를 인식하지 못하게 되는 경우가 있는데 이를 해결하기 위해 사용된다.

 

이유

CSS에서 float 속성을 사용하면 문서에서 떠있는 상태가 된다. 즉, 부모 요소는 자식 요소의 float 상태를 무시하면서 자식 요소가 차지하는 높이를 계산하지 않게 된다.

<div class="container">
    <div class="child" style="float: left; width: 50%;">내용</div>
    <div class="child" style="float: left; width: 50%;">내용</div>
</div>

예를 들면, 위 HTML에서 .container 는 자식 요소들의 float 를 인식하지 못하므로 높이가 0이 된다. 따라서 .container 의 배경색이나 테두리 등이 제대로 표시되지 않을 수 있다.

 

해결

방법은 굉장히 여러 가지 수단이 있는데 아래는 그 중의 한 방법이다.

.clearfix {
    overflow:auto;
    zoom:1; /* for IE6 */
}

• overflow: auto / overflow: hidden - 부모 요소가 자식 요소의 float 를 포함하도록 강제한다.
• zoom: 1 - IE6~7에서 hasLayout 이라는 레이아웃 버그를 해결하기 위해 사용되었다. 이를 사용하게 되면 해당 요소가 레이아웃을 가지게 되면서 float 문제를 해결할 수 있다.

※Clearfix - http://stackoverflow.com/questions/8554043/what-is-clearfix
※Ref
 1) http://aboooks.tistory.com/328
 2) http://ko.learnlayout.com/clearfix.html