---
id: howto-css-clearfix
title: "How To - Clear Floats (Clearfix)"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["clearfix hack", "overflow auto clear floats"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "layout", "float", "clearfix"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_clearfix.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Clearfix]]

## 🎯 한 줄 통찰 (One-line insight)
The root problem this recipe fixes is that a floated element is deliberately removed from the normal document flow, which means its PARENT container has no way to "see" the float's height and collapses as if the float weren't there at all — the page offers two competing fixes with an explicit trade-off verdict: `overflow: auto` is a one-line fix but risks stray scrollbars if margins/padding aren't carefully controlled, while the "modern" `::after { content: ""; clear: both; display: table; }` pseudo-element trick is called out as the SAFER, more widely-used option precisely because it avoids that scrollbar risk. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Why containers collapse** — a floated child is removed from normal flow, so a parent with no other content collapses to zero height, as if the float weren't there. [S1]
- **`overflow: auto` fix** — the simplest fix, forces the parent to establish a new block formatting context that accounts for floated children's height; risk of stray scrollbars if margin/padding isn't carefully managed. [S1]
- **Modern `::after` clearfix (recommended)** — `.clearfix::after { content: ""; clear: both; display: table; }` — inserts an invisible block-level pseudo-element after the floated children that clears both sides, safely restoring the container's height without scrollbar risk. [S1]

## 📖 세부 내용 (Details)
- Simple fix: `.clearfix { overflow: auto; }`. [S1]
- Recommended modern fix: `.clearfix::after { content: ""; clear: both; display: table; }` — explicitly stated as "used for most webpages" today. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

## 🛠️ 적용 사례 (Applied in summary)
"Without Clearfix" 상태(컨테이너가 무너짐)와 "With Clearfix" 상태(정상 높이 유지)를 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Two clearfix techniques — overflow:auto (simple) vs. ::after pseudo-element (recommended) (CSS):
```css
/* Simple -- risk of stray scrollbars */
.clearfix-simple { overflow: auto; }

/* Modern, recommended -- safer */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.85
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS About Page]], [[HOWTO CSS Equal Height]], [[HOWTO CSS Four Columns]]
- **참조 맥락:** CSS Layout & Positioning 섹션.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Clear Floats (Clearfix) — https://www.w3schools.com/howto/howto_css_clearfix.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Clear Floats (Clearfix)" recipe (Astra wiki-curation, P-Reinforce v3.1 format).