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