clearfix 핵

다음은 float를 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않은 경우입니다.

img {
  float: right;
}

<div>

이런... 이 이미지는 그것을 담고 있는 엘리먼트보다 높이가 높고 떠 있어서 컨테이너 바깥으로 넘쳤습니다!

이 문제를 해결하는 방법이 하나 있긴 하지만 조금 지저분합니다. 이를 clearfix 핵이라고 합니다.

다음과 같은 CSS 코드를 새로 추가해 봅시다.

.clearfix {
  overflow: auto;
}

이제 어떻게 되는지 확인해 봅시다.

<div class="clearfix">

훨씬 낫네요!

이 기법은 근래에 나온 브라우저에만 동작합니다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 합니다.

.clearfix {
  overflow: auto;
  zoom: 1;
}

이 기법을 쓸 때 좀 더 주의를 기울여야 할 특이한 브라우저들도 있습니다. clearfix의 세계는 굉장히 소름끼치지만 이 간단한 해법은 대부분의 브라우저에 효과가 있을 것입니다.