부트스트랩(Bootstrap)에서 .clearfix 클래스는 요소에 적용된 float 속성을 해제(clear)하는 데 사용됩니다. 요소가 좌우로 떠 있을 때 부모 컨테이너의 높이가 무너지는 문제를 방지할 수 있어, 레이아웃이 깨지는 것을 막는 필수 유틸리티 클래스입니다.
Clearfix가 필요한 이유
HTML 요소에 float: left; 또는 float: right;를 적용하면 해당 요소는 일반적인 문서 흐름에서 벗어나게 됩니다. 이 경우 부모 요소가 자식 요소의 높이를 인식하지 못해 배경이나 테두리가 제대로 표시되지 않는 현상이 발생합니다. .clearfix 클래스를 부모 요소에 추가하면 이러한 문제를 간단히 해결할 수 있습니다.
예제
아래 코드를 실행하여 clearfix 클래스의 동작을 직접 확인해 보세요. 왼쪽과 오른쪽으로 띄워진 두 개의 div 요소가 부모 컨테이너 안에서 올바르게 정렬되는 것을 볼 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;"> <div class = "pull-left" style = "background:#58D3F7;"> Quick Float to left </div> <div class = "pull-right" style = "background: #DA81F5;"> Quick Float to right </div> </div> </body> </html>
코드 설명
- .clearfix: 부모 컨테이너에 적용되어 내부 float 요소들을 감싸도록 만듭니다.
- .pull-left: 요소를 왼쪽으로 빠르게 띄웁니다(float: left).
- .pull-right: 요소를 오른쪽으로 빠르게 띄웁니다(float: right).
참고로 부트스트랩 3에서 사용된 .pull-left, .pull-right 클래스는 부트스트랩 4부터 .float-left, .float-right로 이름이 변경되었으며, 부트스트랩 5에서는 .float-start, .float-end로 더욱 발전했습니다. 또한 clearfix 기능은 CSS만으로도 구현 가능하며, 대표적으로 overflow: hidden; 설정이나 ::after 가상 요소를 활용하는 방법이 널리 사용됩니다.