[CSS] 플로트(Float)와 클리어런스 (레거시의 유산)

이번 포스팅에서는 [CSS 레이아웃 역사] 파트의 세부 주제인 Float 기반 레이아웃과 Clearfix 노하우에 대하여 상세히 알아보겠습니다.

1. Float 본연의 목적: 이미지 텍스트 감싸기

현대 웹에서는 레이아웃용으로 Float을 쓰지 않습니다(Flex/Grid 사용). 하지만 신문 기사처럼 이미지 옆으로 텍스트가 자연스럽게 흘러가게 만드는 것은 여전히 Float만의 고유한 영역입니다.

.article-image {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  /* 텍스트가 이미지를 우측으로 자연스럽게 휘감으며 흘러갑니다. */
}

2. 무너진 부모 레이아웃 살리기: Clearfix Hack

레거시 프로젝트 유지보수 시 1순위로 만나는 문제입니다. 자식 요소들이 모두 float 되면 부모는 높이를 잃고 찌그러집니다. 이를 깔끔하게 해결하는 전역 유틸리티 클래스를 소개합니다.

/* float를 사용한 자식 요소를 감싸는 부모 태그에 class="clearfix"를 추가하세요 */
.clearfix::after {
  content: "";
  display: block;
  clear: both; /* 양쪽 float의 영향을 모두 끊어냅니다 */
}

---

지금까지 Float의 본래 목적과 부작용을 해결하는 Clearfix에 대해 살펴보았습니다. 과거의 기술이라도 레거시 유지보수를 위해서는 반드시 그 원리를 이해하고 있어야 합니다.