웹 페이지를 만들다 보면 float 속성을 사용한 요소가 부모 컨테이너의 높이를 벗어나거나, 다음 요소들이 의도치 않게 배치되는 문제가 자주 발생합니다. 이런 상황에서 Bootstrap이 제공하는 .clearfix 유틸리티 클래스를 사용하면 간단하게 float를 해제(clear)할 수 있습니다.
.clearfix 클래스란?
.clearfix는 부모 요소에 적용하면 내부의 float된 자식 요소들을 감싸도록 높이를 자동으로 계산해 주는 클래스입니다. 별도의 빈 태그나 추가 CSS 없이 클래스 하나만 추가하면 되기 때문에 코드가 깔끔해지고 유지보수가 쉬워집니다.
사용 예제
아래 예제는 왼쪽(.pull-left)과 오른쪽(.pull-right)으로 float된 두 개의 div를 .clearfix 클래스로 감싸는 방법을 보여줍니다. 직접 실행해서 결과를 확인해 보세요.
<!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: blue; color: white;"> left </div> <div class = "pull-right" style = "background: blue; color:white;"> right </div> </div> </body> </html>
참고: Bootstrap 버전별 차이점
위 예제는 Bootstrap 3 기준입니다. Bootstrap 4 이상 버전에서는 .pull-left, .pull-right 대신 .float-left, .float-right(Bootstrap 5에서는 .float-start, .float-end) 클래스를 사용합니다. 반응형 웹에서는 화면 크기에 따라 float를 조절하는 .float-md-left 같은 유틸리티도 활용할 수 있습니다.
정리
- float된 요소로 인한 레이아웃 깨짐은
.clearfix클래스로 해결할 수 있습니다. - float된 자식 요소를 포함하는 부모 요소에 클래스를 적용해야 합니다.
- Bootstrap 버전에 따라 float 관련 클래스 이름이 다르므로 사용 중인 버전을 확인하세요.