2nd/10_Wiki/Topic_CSS/CSS_Clear_Clearfix.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-clear-and-clearfix	CSS Clear and Clearfix	Frontend	draft	conceptual		clear clearfix clearfix hack CSS clear clear both float clearing		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools float clear layout	https://www.w3schools.com/css/css_float_clear.asp

CSS Clear and Clearfix

🎯 한 줄 통찰 (One-line insight)

The clear property stops elements from wrapping around floated content, and the clearfix hack (an ::after pseudo-element with clear: both) forces a container to expand to include its floated children. [S1]

🧠 핵심 개념 (Core concepts)

• clear purpose — the clear property specifies behavior for elements adjacent to floated content; it prevents elements from wrapping around or beside the floated content. [S1]
• none (default) — allows floating on either side. [S1]
• left — pushes the element below left-side floats. [S1]
• right — pushes the element below right-side floats. [S1]
• both — pushes the element below floats on both sides. [S1]
• inherit — inherits the parent's clear value. [S1]
• clearfix problem — when floated elements exceed their container's height, they overflow the container. [S1]
• clearfix solution — use the ::after pseudo-element to contain floats properly. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Drop below a float — set clear (e.g. clear: left) on the next element to push it below the float instead of beside it. [S1]
• Clearfix hack — add an ::after pseudo-element with empty content, clear: both, and display: table to make a parent contain its floated children. [S1]

📖 세부 내용 (Details)

The clear property [S1] The clear property specifies behavior for elements adjacent to floated content. It prevents elements from wrapping around or beside the floated content.

Clear property values [S1]

Value	Behavior
none	Allows floating on either side (default)
left	Pushes element below left-side floats
right	Pushes element below right-side floats
both	Pushes element below floats on both sides
inherit	Inherits parent's clear value

Clear example [S1]

div1 {
  float: left;
}

div2 {
  clear: left;
}

The clearfix hack [S1] When floated elements exceed container height, they overflow. The clearfix solution uses the ::after pseudo-element to contain floats properly.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

How it works [S1]

• .clearfix::after targets the pseudo-element generated after the element's content.
• content: "" renders the pseudo-element despite having no visible content.
• clear: both pushes following content below floated elements and expands the parent container.
• display: table establishes a new block formatting context for containing floats.

The page notes: "This clears both left and right floats, effectively pushing any following content below the floated elements, and forces the parent container to expand to include them." [S1]

🛠️ 적용 사례 (Applied in summary)

The page's applied examples are a clear: left element dropped below a left-floated sibling, and a .clearfix container that uses ::after { content: ""; clear: both; display: table; } to expand around its floated children. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Push an element below a left float (language: CSS):

div1 {
  float: left;
}

div2 {
  clear: left;
}

Clearfix hack to contain floats (language: CSS):

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• none — default; element may sit beside floats. [S1]
• left / right — drop the element below floats on that one side. [S1]
• both — drop below floats on either side; used inside the clearfix hack. [S1]
• inherit — take the parent's clear value. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Float, CSS Overflow, CSS Position Fixed and Absolute
• 참조 맥락: Referenced whenever floated elements must be cleared or a container must expand to contain its floats.

📚 출처 (Sources)

• [S1] W3Schools — CSS Clear and Clearfix — https://www.w3schools.com/css/css_float_clear.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Clear and Clearfix" page (Astra wiki-curation, P-Reinforce v3.1 format).