한 줄 요약 — float은 원래 신문·잡지처럼 사진 옆으로 글이 흘러내리게 하려고 만든 속성이다. 한때는 페이지 전체 레이아웃까지 이걸로 짰지만, 지금 그 일은 Flexbox·Grid의 몫이다. 그래서 오늘은 둘로 나눠 본다 — float이 여전히 맞는 자리(이미지 둘레로 흐르는 텍스트)와, 더는 쓰지 말아야 할 자리(2단 레이아웃), 그리고 float이 부모 높이를 무너뜨렸을 때 되살리는 clear·clearfix.

학습 목표#

  • float이 원래 무엇을 위해 만들어졌고, 지금도 맞는 쓰임이 무엇인지 설명할 수 있다.
  • float: left와 float: right로 이미지 둘레에 텍스트를 흐르게 만들 수 있다.
  • float된 자식 때문에 부모 높이가 0이 되는 이유를 알고, clear와 clearfix로 고칠 수 있다.
  • 같은 2단 배치를 float과 flex로 만들어 보고, 지금은 왜 flex를 쓰는지 말할 수 있다.

오늘의 비유 — 신문 사진 옆으로 흘러내리는 기사#

종이 신문의 기사 한 꼭지를 떠올려 보자. 글 사이에 사진 한 장을 끼워 넣으면, 본문은 그 사진의 옆을 따라 줄을 짧게 끊어 흐르다가, 사진이 끝나는 지점부터는 다시 지면 끝까지 폭을 채운다. 사진은 글의 흐름 옆으로 '비켜서 있고', 글은 그 둘레를 자연스럽게 감싼다. float은 바로 이 편집 방식을 화면에서 그대로 재현하려고 태어났다.

문제는 그다음이다. "한쪽으로 비켜 세운다"는 이 편리한 도구를 사람들이 지면 전체의 뼈대를 짜는 데까지 끌어 썼다. 사진 한 장이 아니라 기사 단(段)을 통째로 왼쪽·오른쪽으로 띄워 2단·3단 지면을 만든 것이다. 당시엔 달리 방법이 없었지만, 이 용법은 곧 살펴볼 '부모가 납작하게 무너지는' 골칫거리를 달고 다닌다. 지금은 그 일을 Flexbox와 Grid가 깔끔하게 맡으니, float은 본래의 자리 — 사진 둘레로 글을 흘리는 일 — 로 돌려보내면 된다.

핵심 개념#

float의 본래 일 — 텍스트가 사진을 감싼다#

요소에 float을 주면 그 요소는 보통 흐름에서 한쪽으로 비켜서고, 뒤따르는 인라인 콘텐츠(주로 글)가 그 둘레로 흘러내린다. left면 왼쪽으로 붙고 글이 오른쪽으로, right면 그 반대다.

<article>
  <img src="cover.jpg" alt="여름호 표지 사진" class="photo" />
  <p>편집팀이 고른 이번 호 이야기가 길게 이어진다…</p>
</article>

.photo {
  float: left;
  width: 180px;
  margin: 0 16px 8px 0;
}

저장하고 열어 보면, 사진이 왼쪽에 붙고 본문이 사진의 오른쪽을 따라 짧게 흐르다가, 사진 아래 높이부터는 지면 폭을 가득 채운다. 신문에서 보던 그 모양이다. 여기서 중요한 점 하나 — 이 '감싸 흐르는' 효과만큼은 Flexbox·Grid로 대체되지 않는다. float이 아직 살아 있는 이유다.

float이 만든 문제 — 부모가 납작하게 무너진다#

float된 요소는 보통 흐름에서 빠지기 때문에, 부모는 그 높이를 더 이상 '세지' 않는다. 그래서 자식이 전부 float이면 부모는 높이 0으로 납작하게 접힌다. 테두리나 배경을 줬다면 선 한 줄로 쪼그라들어 버린다.

/* (.article의 높이가 0이 되어 테두리가 선 한 줄로 무너집니다) */
.article {
  border: 1px solid #ddd;
}

.article .photo {
  float: left;
}

지면의 사진을 '띄웠더니' 정작 그 사진을 담던 칸이 사라진 셈이다. 이걸 되살리는 게 clear와 clearfix다.

clear와 clearfix — 흐름을 되돌린다#

clear는 "나는 float 옆에 끼지 않고 그 아래로 내려가겠다"는 선언이다. float 다음에 와야 할 요소가 자꾸 사진 옆으로 파고들 때 clear: both로 한 줄 내린다.

부모가 무너지는 문제는 clearfix로 푼다. 고전적인 방법은 부모 끝에 비어 있는 가상 요소를 만들어 clear를 거는 것이다.

.article::after {
  content: "";
  display: block;
  clear: both;
}

요즘은 더 짧은 한 줄이면 끝난다. 부모에 display: flow-root를 주면 그 박스는 안쪽 float을 스스로 품어 높이를 되찾는다.

.article {
  display: flow-root;
}

특별한 이유가 없으면 display: flow-root 쪽이 무난하다. 가상 요소 없이 의도가 한 줄에 드러나기 때문이다.

함께 따라하기 — 잡지 기사 사진, float에서 flex까지#

같은 디자인을 두 방식으로 만들어 차이를 몸으로 느껴 본다. 먼저 float으로 사진 둘레에 글을 흘려 보자.

<article class="story">
  <img src="cover.jpg" alt="여름호 표지" class="story__photo" />
  <h2>여름호가 나왔습니다</h2>
  <p>편집팀이 고른 이번 호 이야기를 충분히 길게 적어 둔다…</p>
</article>

.story {
  display: flow-root; /* 안쪽 float을 품어 높이가 살아 있다 */
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.story__photo {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

화면을 보면, 사진이 왼쪽에 붙고 제목과 본문이 그 오른쪽을 감싸며 흐르다 사진 아래로 이어진다. 테두리는 flow-root 덕분에 글 전체를 감싼다.

이번엔 사진과 글을 각자 한 칸씩 차지하는 2단으로 두고 싶다고 하자. 글이 사진 아래로 흘러내리지 않고 자기 칸에 머물러야 한다. 이건 '감싸기'가 아니라 '나란히 배치'라서, float을 걷고 flex로 바꾼다.

.story {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.story__photo {
  width: 160px; /* float 없이 그냥 왼쪽 칸 */
}

이제 사진은 왼쪽 칸, 글은 오른쪽 칸에 각각 자리 잡고, 본문은 사진 아래로 내려오지 않는다. clearfix도 필요 없다. 둘레로 흘리려면 float, 나란히 두 칸이면 flex — 이 한 줄이 오늘의 핵심이다.

흔한 실수 3가지#

1. 옛날 자료를 보고 레이아웃을 float으로 시작한다#

검색하면 아직도 float으로 페이지 골격을 짜는 옛 글이 많다. 그대로 따라 하면 너비를 일일이 계산하고 clearfix를 덕지덕지 붙이게 된다.

/* (요즘 이렇게 레이아웃을 시작할 이유가 없습니다) */
.col {
  float: left;
  width: 33.33%;
}

칸을 나누는 일은 이제 한두 줄로 끝난다. float은 '사진 둘레로 글 흘리기'에만 남겨 두자.

.cols {
  display: flex;
  gap: 16px;
}

2. clear를 안 해 부모 박스가 0 높이로 무너진다#

테두리나 배경을 준 박스가 갑자기 선 한 줄로 쪼그라들면, 안에 float된 자식이 있는데 부모가 그걸 못 품은 것이다. 위에서 본 그 무너짐이다. 부모에 한 줄만 더하면 높이가 돌아온다.

.article {
  display: flow-root; /* 안쪽 float을 품는다 */
  border: 1px solid #ddd;
}

옛 코드를 만지는 중이라면 ::after clearfix가 이미 깔려 있을 수도 있으니, 둘을 겹쳐 주지 않도록 한쪽만 남긴다.

3. float을 사이드바 + 본문 2단 레이아웃에 계속 쓴다#

가장 흔한 잔재가 "사이드바는 float: left, 본문은 그 옆에" 패턴이다. 너비 합을 맞추고 부모엔 clearfix를 걸어야 겨우 선다.

/* (너비 계산과 clearfix가 늘 따라붙습니다) */
.sidebar { float: left; width: 240px; }
.content { margin-left: 240px; }

같은 2단을 flex로 짜면 너비 계산도, clearfix도 사라진다. 본문이 남는 공간을 알아서 채운다.

.layout {
  display: flex;
  gap: 24px;
}

.content {
  flex: 1; /* 남는 폭을 본문이 차지 */
}

오늘 배운 것 체크리스트#

  • float의 본래·현역 용도는 '이미지 둘레로 텍스트 흘리기'다.
  • float: left는 왼쪽, right는 오른쪽에 붙고 글이 반대편으로 흐른다.
  • 자식이 전부 float이면 부모 높이가 0으로 무너진다.
  • clearfix(::after + clear) 또는 display: flow-root로 부모 높이를 되살린다.
  • 칸을 나누는 레이아웃은 float이 아니라 flex·grid로 짠다.

자주 묻는 질문#

Q. float: left와 float: right는 어떻게 다른가요?

A. 떠 있는 요소가 어느 쪽 가장자리에 붙느냐의 차이입니다. left면 요소가 왼쪽에 붙고 뒤따르는 글이 오른쪽으로 흐르며, right면 요소가 오른쪽에 붙고 글이 왼쪽으로 흐릅니다. 신문에서 사진을 왼쪽에 둘지 오른쪽에 둘지 고르는 것과 같습니다.

Q. 그럼 float은 이제 아예 안 써도 되나요?

A. 레이아웃(칸 나누기)에는 더 쓰지 않아도 됩니다. 그 일은 Flexbox와 Grid가 더 쉽고 안전하게 합니다. 다만 이미지 둘레로 텍스트가 흐르게 하는 효과는 지금도 float만 할 수 있으니, 그 한 가지 자리에서는 여전히 현역입니다.

Q. 이미지 둘레로 흐르던 글이 사진 아래로까지 내려가지 않게 하려면요?

A. 두 가지 방법이 있습니다. 그 글 다음에 와야 할 요소에 clear: both를 주면 사진 아래로 깔끔히 내려갑니다. 아니면 애초에 '감싸기'가 아니라 '나란히 두 칸'을 원하는 것이므로, float을 걷고 부모를 display: flex로 만들면 글이 자기 칸에 머물러 사진 아래로 흐르지 않습니다.

다음 시간 예고#

내일은 Flexbox 기초 — display:flex, flex-direction, justify-content를 다룬다. 오늘 float을 걷어내고 넘겨준 그 '칸 나누기'를 본격적으로 맡을 도구다. 한 줄에 요소를 늘어놓고 가로·세로로 정렬하는 가장 기본적인 두세 속성부터 손에 익힌다.

더 알아보기#