03 — Float & Clear

한 줄 답: Float는 1996년 신문 사진처럼 텍스트가 흐르도록 만들기 위해 태어났고, 2010년대에 전체 레이아웃 도구로 잘못 쓰였다가, 2026년에는 텍스트 옆 이미지 흐름 + shape-outside 라는 본업으로 돌아왔다.

Why — Float를 왜 아직 알아야 하나

2017년 이후 Flexbox/Grid가 표준이 되며 레이아웃 도구로서의 float는 죽었다. 하지만:

레거시 코드베이스가 여전히 float 그리드를 쓴다 → 읽을 줄은 알아야 한다.
Float의 본래 용도 — 텍스트가 이미지를 휘감는 효과 — 는 Flex/Grid로 못 만든다.
shape-outside(2017+)는 float와 짝지어 원형·다각형 텍스트 흐름을 만든다.
Margin collapse, BFC, clearfix 같은 normal flow 개념의 역사적 맥락이 float에서 나왔다.

<!-- 2026년에 float가 의미 있는 거의 유일한 케이스 -->
<article>
  <img src="hero.jpg" style="float: left; shape-outside: circle(50%); margin: 0 1rem 1rem 0;">
  <p>Lorem ipsum dolor sit amet... 텍스트가 이미지의 원형을 따라 흐른다.</p>
</article>

How — 어떻게 동작하나

1) Float의 정의

float: left | right | inline-start | inline-end | none

요소를 normal flow에서 꺼내 부모의 좌/우 끝으로 보낸다.
뒤따르는 inline 컨텐츠(텍스트)는 float 박스를 피해 흐른다.
뒤따르는 block 박스는 float 박스 밑에 자리잡지만, 그 안의 inline은 피해 흐른다 (이게 핵심).

2) `clear` — 흐름 복귀

.next-section { clear: both; }  /* 위 float를 모두 지난 다음부터 시작 */

clear: left → 왼쪽 float를 지난다
clear: right → 오른쪽 float를 지난다
clear: both → 양쪽 다 지난다
clear: inline-end / inline-start (logical, 2024+)

3) Float 붕괴 문제와 clearfix

부모가 float 자식만 가지면 높이가 0이 된다:

<div class="parent">
  <div class="child" style="float: left">A</div>
  <div class="child" style="float: left">B</div>
</div>
<!-- .parent의 높이 = 0 (float는 부모 높이에 기여 안 함) -->

해결 (시대별):

/* 2003년: 빈 div */
<div style="clear: both"></div>
 
/* 2004년 (Position Is Everything): clearfix */
.parent::after { content: ""; display: block; clear: both; }
 
/* 2010년대: overflow: hidden (BFC 형성) */
.parent { overflow: hidden; }  /* 부수효과: 잘림, sticky 죽음 */
 
/* 2017년~: */
.parent { display: flow-root; }  /* ★ 의도 정확 */

2026 BP: 어떤 이유로든 float를 쓴다면 부모는 display: flow-root로 BFC를 형성.

4) `shape-outside` — Float의 모던 활용

.hero-image {
  float: left;
  width: 200px; height: 200px;
  shape-outside: circle(50%);    /* 원형 흐름 */
  margin: 0 1rem 1rem 0;
}

shape-outside 값:

circle(r at x y)
ellipse(rx ry at x y)
polygon(x1 y1, x2 y2, ...)
inset(top right bottom left round radius)
url(mask.png) — 이미지의 알파 채널로 모양 정의
path("M ...") — SVG path

→ Float는 사각형이지만 텍스트 흐름은 비사각형으로 만든다.

5) Float와 BFC의 상호작용

Float 박스 자체는 BFC를 형성한다.
BFC인 박스는 float를 피한다 (겹치지 않는다).

/* float 옆에 BFC를 두면 깔끔하게 분리됨 */
img { float: left; width: 200px; }
.aside { display: flow-root; }  /* BFC → float를 침범하지 않음 */

→ 옛날에 “이미지 옆에 박스가 깔끔히 정렬되게” 만들 때 쓰던 패턴.

What — 구체 사양

Float의 정확한 규칙 (CSS 2.2 §9.5)

Float 박스는 부모의 content edge 또는 다른 float 박스의 edge까지 좌/우로 밀린다.
normal flow에서 이탈하지만, 라인 박스들은 float를 피해 줄어든다.
Float 박스는 부모 높이에 기여하지 않는다.
Float 박스는 자기 자신 또는 BFC 형제를 침범하지 않는다.

`float` 값

값	의미
`none`	기본값 — float 안 함
`left`	왼쪽으로
`right`	오른쪽으로
`inline-start`	logical: LTR에서 left, RTL에서 right
`inline-end`	logical: LTR에서 right, RTL에서 left

`clear` 값

값	의미
`none`	기본 — 흐름 안 끊음
`left`	왼쪽 float를 지난다
`right`	오른쪽 float를 지난다
`both`	양쪽
`inline-start` / `inline-end`	logical

`shape-outside` + 보조

.hero {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 1rem;                 /* shape 바깥쪽 여유 */
  shape-image-threshold: 0.5;          /* url(...) 사용 시 알파 임계 */
}

2026년에 float가 유효한 케이스

케이스	이유
기사 본문에 이미지가 텍스트 안에 흐를 때	Flex/Grid는 흐름을 못 만듦
약물(略物) — 첫 글자 큰 drop cap	`::first-letter { float: left; font-size: 4em }`
Drop cap 안에 원형 모양 흐름	`shape-outside` 필요
인쇄용 CSS (Paged Media)	인쇄에서는 여전히 float 패턴이 일반적

→ 이게 전부다. 그 외 모든 레이아웃은 Flex/Grid.

What-if — 잘못 쓰면

1) Float로 그리드 만들기 (2010년대 패턴)

.col { float: left; width: 25%; }     /* 4열 그리드 */
.row::after { content: ""; display: block; clear: both; }

→ 2026년에는 모든 면에서 손해:

반응형이 어렵다 (media query 마다 width 재계산)
동등 높이가 안 된다 (각 float가 독립)
정렬이 어렵다 (vertical 정렬 불가)
모든 자식을 float 처리 + clearfix 필요

해결: display: grid 또는 display: flex로 즉시 마이그레이션.

2) Float 옆 박스가 옆이 아니라 아래에 깔리길 원함

<img style="float: left">
<div>여기는 옆에 오는데 ...</div>
<p>... 여기서부터는 아래에 와야 함</p>

p { clear: left; }
/* 또는 */
p { display: flow-root; }  /* BFC가 float를 피함 → 옆이 아니라 아래 */

3) Float 부모 높이 0

→ display: flow-root. 2025+ 코드에 overflow: hidden을 이 목적으로 쓰면 리뷰에서 막아야 한다.

4) `shape-outside`만 박고 float 안 줌

.hero { shape-outside: circle(50%); }  /* float 없음 */
/* → 무시됨. shape-outside는 *float 박스에만* 적용된다 */

→ float: left 또는 float: right가 필수.

5) Float 박스가 다른 float 옆이 아니라 다음 줄로 떨어짐

부모 너비 600px
[float A 300px] [float B 300px]   ← 같은 줄 ✓
[float A 300px] [float B 400px]   ← B가 못 들어가 다음 줄로 떨어짐

→ float의 자연스러운 동작. 한 줄에 못 들어가면 다음 사용 가능한 자리로.

Insight — 흥미로운 이야기

”Float는 신문 디자인의 비유였다”

CSS1 명세 작성자 Håkon Wium Lie는 1994년 “디지털 잡지 레이아웃을 만들 도구가 필요하다” 고 썼다. 종이 잡지에는 기사 본문에 사진이 끼어들고 텍스트가 휘감는 패턴이 핵심이었다. 이 비유에서 float가 태어났다.

웹이 문서가 아니라 앱이 되면서 float는 전혀 다른 용도로 쓰이기 시작했다 — 2000년대 후반의 3-column float layout, Bootstrap 2 grid가 대표. 의도와 어긋난 도구는 clearfix 같은 해킹을 만들어냈다.

”Flexbox가 늦은 30년”

CSS 명세에 Flexbox 초안이 처음 등장한 건 2009년이지만, 2017년에야 안정적인 brower 지원이 됐다. 그 9년 동안 float는 “있는 도구로 할 수 있는 최선” 으로 남용됐다.

“우리는 한 세대 동안 못으로 나사를 박았다.” — 모 CSS 개발자.

”shape-outside는 살아남은 본업”

shape-outside(2017)는 float의 유일하게 모던화된 사용처다. 원형 아바타 옆에 텍스트가 둥글게 흐르는 효과는 Flex/Grid로 만들 수 없다 — 둘 다 사각형 셀의 배치가 본질이기 때문.

CSS Shapes Module Level 1은 조판 도구로서의 CSS를 다시 살리려는 시도다. 잡지·신문·서적 같은 인쇄물의 비유가 디지털에서 살아남는 유일한 통로다.

”왜 `float: top/bottom`은 없나”

CSS WG는 수직 float를 고려했지만 block axis 흐름은 위→아래 단방향이라 의미가 없다고 결론냈다 (1998). 2024년 현재 page floats (인쇄 매체) 명세에 float: top이 있지만, 화면 매체에는 없다.

→ 흐름의 방향성이 도구의 한계를 정한다.

요약 + 다이어그램

Float는 텍스트 옆에 박스를 흘리는 도구로 태어났고, 2010년대에 전체 레이아웃으로 잘못 쓰였다가, 2026년에는 본래 용도 + shape-outside로 살아남았다. Float 부모는 반드시 display: flow-root로 BFC 형성. overflow: hidden 해킹은 폐기. 그리드/플렉스가 필요한 자리에 float를 쓰지 말 것 — 다음 챕터에서 다룬다.

다음 문서: 04-sizing.md — width: 100%와 width: max-content의 차이를 모르면 반응형은 영원히 깨진다.

02 — Position 04 — Sizing & Intrinsic