[CSS] Float와 Clearfix

우리가 매일 사용하는 화려하고 반응성이 뛰어난 웹사이트들의 이면에는 10년이 넘는 프론트엔드 개발자들의 피 튀기는 사투가 숨어있습니다. 현대에는 display: flex나 display: grid 코드 단 한 줄이면 박스 수십 개를 아주 우아하고 아름답게 가로로 나란히 배치할 수 있습니다. 하지만 불과 몇 년 전까지만 해도, CSS에는 '요소들을 가로로 배치하기 위한 전용 레이아웃 속성'이라는 것 자체가 아예 존재하지 않았습니다. 개발자들은 멘붕에 빠졌습니다. "웹사이트의 좌측에는 메뉴바(GNB)를 놓고, 우측에는 본문을 2단으로 나란히 배치하고 싶은데 어떻게 해야 하지?" 결국 그들은 CSS의 본래 목적을 완전히 벗어난, 특정 속성의 버그성 동작을 악용하는 '해킹(Hack)' 기법을 십수 년간 표준처럼 사용하게 됩니다. 그것이 바로 `float` 속성입니다. 이미지를 글씨가 자연스럽게 감싸안게(Wrapping) 만들라고 준 기능을, 레이아웃을 통째로 쪼개는 데 악용한 대가로 수많은 레이아웃 붕괴 대참사가 발생했습니다. 이번 08단계 포스팅에서는 구시대의 유물이지만 아직도 수많은 레거시(Legacy) 코드에 살아 숨 쉬며 신입 개발자들을 괴롭히는 `float`의 원리와, 이로 인해 박살 난 부모 높이를 살려내는 궁극의 흑마법 `Clearfix`에 대해 상세히 알아보겠습니다.

1. Float의 본래 목적: 신문 기사의 삽화 배치

float라는 단어는 '물 위로 둥둥 뜬다'라는 뜻입니다. 원래 W3C가 float 속성을 만든 목적은 단순했습니다. 신문 기사를 보면 텍스트 중간에 사진(삽화)이 들어있고, 글씨들이 그 사진을 피해서 자연스럽게 옆으로 둘러싸며 흐르는(Wrapping) 조판 양식을 볼 수 있습니다. 웹에서도 <img> 태그에 float: left를 주면, 이미지가 왼쪽으로 둥둥 떠서 밀착되고, 그 밑에 있던 <p> 태그의 글씨들이 이미지를 피해서 우측으로 예쁘게 감싸며 올라오게 됩니다. 이것이 float가 탄생한 유일하고도 정상적인 목적입니다.

2. 비극의 시작: 레이아웃 해킹과 부모 높이 붕괴

하지만 영악한 웹 개발자들은 이 속성을 보고 딴생각을 품었습니다. "잠깐, <div> 박스 2개를 만들고 둘 다 float: left를 줘서 왼쪽으로 둥둥 띄우면, 블록(Block) 요소임에도 불구하고 가로로 나란히 배치할 수 있잖아?!" 빙고. 이 꼼수를 통해 2단, 3단 컬럼 레이아웃을 강제로 쪼개서 만드는 Float Grid System이 웹의 절대 표준으로 자리 잡게 됩니다.

🚨 재앙의 도래: 자식이 집을 나가버렸다

기쁨도 잠시, float로 화면을 짠 개발자들은 경악을 금치 못했습니다. 회색 배경을 칠한 거대한 부모 <div> 안에 자식 박스 3개를 넣고 가로 배치를 위해 자식들에게 float: left를 주었더니, 갑자기 부모 박스의 배경색이 싹 사라지고 높이가 0으로 찌그러져 버린 것입니다. 밑에 있던 푸터(Footer) 영역은 위로 무자비하게 딸려 올라와서 떠 있는 자식 박스들과 흉측하게 겹쳐버렸습니다.

이유는 명백했습니다. float가 적용된 요소는 브라우저의 정상적인 렌더링 흐름(Normal Flow)에서 이탈하여 공중으로 둥둥 떠버리기 때문입니다. 부모 박스의 시선에서는 "내 뱃속에 자식들이 다 집을 나가서 허공으로 날아가 버렸으니, 내 안에는 아무것도 없다! 그러니까 내 높이는 0이다!"라고 계산해 버린 것입니다. (Height Collapse 현상)

3. 흑마법의 결정체: Clearfix (클리어픽스)

찌그러진 부모의 높이를 되살리기 위해 전 세계 프론트엔드 커뮤니티는 수많은 해킹 기법을 쏟아냈습니다. 찌그러진 부모 밑에 <div style="clear: both;"></div>라는 아무 의미 없는 쓰레기 태그를 넣어서 흐름을 끊는 원초적인 방법부터 시작하여, 부모에게 overflow: hidden;을 주어 강제로 BFC(Block Formatting Context)를 유발하는 편법까지 동원되었습니다.

하지만 쓰레기 태그를 남발하는 것은 HTML 시맨틱(의미론)을 훼손하는 심각한 문제였습니다. 결국 개발자들은 HTML은 더럽히지 않으면서 CSS만으로 가짜 태그를 만들어내는 궁극의 흑마법, 마이크 애덤스(Micro Clearfix)의 공식을 발명해 냈습니다. 이 공식은 아직도 구형 부트스트랩(Bootstrap)이나 오래된 웹사이트의 .clearfix라는 클래스 이름으로 수만 줄씩 남아있습니다.

/* 💡 구시대 프론트엔드 개발자들의 영혼이 담긴 전설의 공식: Clearfix */
.clearfix::after {
    content: "";      /* 1. 가짜 자식 요소를 부모의 맨 마지막에 투명하게 생성 */
    display: block;   /* 2. 그 자식을 거대한 벽돌(Block)로 만듦 */
    clear: both;      /* 3. 위에서 둥둥 떠다니는 float의 흐름을 양쪽(both) 모두 차단하여 바닥을 다짐! */
}
/* 이제 부모 클래스에 class="clearfix"만 달아주면 찌그러진 높이가 펑! 하고 복원됩니다. */

정리하며

이번 08단계 포스팅에서는 CSS 레이아웃 역사상 가장 어둡고 처절했던 시절의 산물인 float와 그 부작용을 치료하는 clearfix 해킹 기법을 살펴보았습니다. "왜 이런 구닥다리 기술을 지금 굳이 알아야 하죠?"라고 묻는다면, 대한민국의 수많은 공공기관 웹사이트나 대기업의 10년 된 SI 프로젝트 레거시 코드들이 전부 이 float 떡칠로 이루어져 있기 때문입니다. 여러분이 취업해서 처음 맡게 될 유지보수 작업에서 찌그러진 레이아웃을 마주했을 때, 당황하지 않고 clearfix를 꽂아 넣을 수 있는 힘이 여기서 나옵니다. 자, 이제 이 끔찍한 구시대의 해킹 기법은 역사의 뒤안길로 묻어둡시다. W3C가 마침내 개발자들의 절규를 듣고, 오직 '레이아웃'만을 위해 창조된 완벽하고 아름다운 구세주를 하사하셨습니다.

다음 09단계 포스팅(순서상)부터 시작될 모던 웹 배치의 황제! 가로축과 세로축을 마음대로 떡 주무르듯 조작하는 "CSS Flexbox: 레이아웃의 구원자와 1차원 정렬의 마법"에 대해 상세히 파헤쳐 보겠습니다!