Files

T

Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합

이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영.

- Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들
  (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거.
- Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/
  Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/
  Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이
  존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존).
- Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/
  JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동.
- 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리.
- Topic_Programming 최종 문서 수: 2784 → 3985.

2026-07-05 00:39:13 +09:00

3.6 KiB

Raw Blame History

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

title

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):

/* 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).

3.6 KiB Raw Blame History