Float 클리어링 완전 정복! – Clearfix Hack 실습

안녕하세요! 이번 포스팅에서는 플로트 레이아웃에서 자주 마주치는 부모 요소 높이 붕괴(Collapse) 문제를 해결하는 방법, 특히 “clearfix hack” 기법을 빠르게 배워볼게요. ⚡️

---

🔍 1. 문제 복습: 높이 붕괴

• 이전 강의에서 header 안의 h1·nav에 각각 float를 주자
• 부모인 header가 자식의 높이를 인식하지 못해 height: 0 으로 산정
• 패딩이나 border 없이는 배경·테두리가 사라지는 현상 발생

---

⚙️ 2. 가장 쉬운 해결법: 빈 엘리먼트 추가

<header class="main-header clearfix">
  …
</header>

.clearfix::after {
  content: "";       /* pseudo-element 생성 필수 */
  display: block;    /* block 레벨로 만들어야 clear가 동작 */
  clear: both;       /* 왼쪽/오른쪽 float 모두 해제 */
}

• ✅ 동작은 하지만, HTML에 불필요한 빈 <div>가 반복 생성되어 비효율적

---

🚀 3. 모던한 해법: Clearfix Hack

• HTML 구조: 별도 빈 엘리먼트 없이, 부모에 clearfix 클래스 추가

<header class="main-header clearfix">
  …
</header>

• CSS 구현: ::after 의사요소 활용

.clearfix::after {
  content: "";       /* pseudo-element 생성 필수 */
  display: block;    /* block 레벨로 만들어야 clear가 동작 */
  clear: both;       /* 왼쪽/오른쪽 float 모두 해제 */
}

• 원리
  • ::after 가 부모의 마지막 자식으로 삽입되어
  • 마치 “투명한 빈 블록”을 추가한 것처럼 작동해
  • 떠 있는(floated) 자식 요소들이 종료된 이후에 레이아웃 흐름을 복구

---

✅ Clearfix Hack 장·단점 비교

구분빈 <div> 클리어링Clearfix Hack

HTML 오염	✔️ (불필요한 마크업 증가)	❌ (구조 깨끗)
재사용성	❌ (매번 추가 필요)	✔️ (클래스 한 번만 적용)
유지보수 편의	❌ (분산된 <div> 관리)	✔️ (CSS 한 곳에서 관리)

 

---

✍️ 마무리

이제 플로트 레이아웃의 높이 붕괴 문제를 깔끔히 해결할 수 있는 clearfix hack를 배웠습니다.
다음 포스팅에서는 이 지식을 활용해 간단한 2단 레이아웃(sidebar+content) 을 float만으로 구현해볼게요.

 

도움이 되셨다면 공감 ❤️과 구독 ⭐ 부탁드려요! 댓글로 궁금한 점 남겨주세요~