CSS에서 요소에 float 속성을 적용하면 부모 컨테이너가 자식 요소의 높이를 인식하지 못해 레이아웃이 무너지는 문제가 발생할 수 있습니다. 이때 clearfix 핵(hack)을 사용하면 별도의 추가 마크업 없이도 플로트된 요소를 깔끔하게 정리(clear)할 수 있습니다.
clearfix란 무엇인가?
clearfix는 플로트된 자식 요소 때문에 부모 요소의 높이가 0으로 계산되는 문제를 해결하는 기법입니다. 가장 간단한 방법은 부모 요소에 overflow: auto; 또는 overflow: hidden;을 적용하는 것입니다. 이렇게 하면 부모 요소가 플로트된 자식까지 포함하여 전체 높이를 감싸게 됩니다.
예제 코드
다음 예제는 clearfix 적용 전과 후의 차이를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
border: 3px solid rgb(21, 0, 114);
padding: 5px;
}
img {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h1>Clearfix 핵 예제</h1>
<h2>Clearfix 미적용</h2>
<div>
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100" />
샘플 텍스트
</div>
<h2 style="clear:right">Clearfix 적용</h2>
<div class="clearfix">
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100" />
샘플 텍스트
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- Clearfix 미적용 영역: 이미지가 오른쪽으로 플로트되면서 부모 div의 테두리가 이미지를 제대로 감싸지 못하고 무너져 보입니다.
- Clearfix 적용 영역:
overflow: auto;덕분에 부모 div가 플로트된 이미지까지 온전히 감싸며 정상적인 레이아웃이 유지됩니다.
동작 원리
overflow: auto;를 설정하면 해당 요소가 새로운 블록 서식 맥락(Block Formatting Context, BFC)을 생성합니다. BFC 내부에서는 플로트된 요소도 높이 계산에 포함되기 때문에 부모 요소가 자식의 크기를 인식하게 되는 것입니다.
참고 사항
overflow: hidden;을 사용해도 동일한 효과를 얻을 수 있지만, 드롭다운 메뉴처럼 부모 영역 밖으로 넘치는 콘텐츠가 있는 경우 잘려 보일 수 있으므로 상황에 맞게 선택하는 것이 좋습니다.