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.
This commit is contained in:
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: css-float
|
||||
title: "CSS Float"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["float", "CSS float", "float left", "float right", "wrap text around image", "floating elements"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "float", "layout"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_float.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Float]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `float` property places an element on the left or right side of its container, allowing text and inline elements to wrap around it — commonly used to wrap text around images. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **purpose** — the `float` property specifies how an element should float within its container, placing it on the left or right side so text and inline elements wrap around it. [S1]
|
||||
- **left** — the element floats to the left of its container. [S1]
|
||||
- **right** — the element floats to the right of its container. [S1]
|
||||
- **none (default)** — the element does not float and is displayed just where it occurs in the text. [S1]
|
||||
- **inherit** — the element inherits the float value of its parent. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Wrap text around an image** — apply `float: left` or `float: right` to an image so surrounding text flows around it. [S1]
|
||||
- **Side-by-side blocks** — float multiple block elements `left` (with padding) to lay them out next to each other in a row. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Overview** [S1]
|
||||
The `float` property specifies how an element should float within its container. It places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
|
||||
|
||||
**Tip:** The `float` property is often used to wrap text around images! [S1]
|
||||
|
||||
**Float values** [S1]
|
||||
- **left** — The element floats to the left of its container.
|
||||
- **right** — The element floats to the right of its container.
|
||||
- **none** — Default. The element does not float and is displayed just where it occurs in the text.
|
||||
- **inherit** — The element inherits the float value of its parent.
|
||||
|
||||
**Float Right example** [S1]
|
||||
```css
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
**Float Left example** [S1]
|
||||
```css
|
||||
img {
|
||||
float: left;
|
||||
}
|
||||
```
|
||||
|
||||
**Float None example** [S1]
|
||||
```css
|
||||
img {
|
||||
float: none;
|
||||
}
|
||||
```
|
||||
|
||||
**Float Next to Each Other example** [S1]
|
||||
```css
|
||||
div {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
.div1 {
|
||||
background: red;
|
||||
}
|
||||
.div2 {
|
||||
background: yellow;
|
||||
}
|
||||
.div3 {
|
||||
background: green;
|
||||
}
|
||||
```
|
||||
|
||||
**Property reference** [S1]
|
||||
|
||||
| Property | Description |
|
||||
|----------|-------------|
|
||||
| float | Specifies whether an element should float to the left, right, or not at all |
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's applied examples float an `img` right, left, and none, plus three `div`s floated left with padding and distinct background colors (red, yellow, green) laid out next to each other. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Float an image so text wraps around it (language: CSS):
|
||||
```css
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
Lay block elements out side by side (language: CSS):
|
||||
```css
|
||||
div {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
.div1 {
|
||||
background: red;
|
||||
}
|
||||
.div2 {
|
||||
background: yellow;
|
||||
}
|
||||
.div3 {
|
||||
background: green;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **left** — float to the container's left edge; content wraps on the right. [S1]
|
||||
- **right** — float to the container's right edge; content wraps on the left. [S1]
|
||||
- **none** — default; no floating, element stays in normal flow. [S1]
|
||||
- **inherit** — take the parent's float 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 Clear and Clearfix]], [[CSS Overflow]], [[CSS Position Fixed and Absolute]]
|
||||
- **참조 맥락:** Referenced whenever an element should sit to one side with content wrapping around it, or for side-by-side block layouts.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Float — https://www.w3schools.com/css/css_float.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Float" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user