AAtomic CSS

float & clear

레거시 레이아웃 방식으로, 현재는 주로 이미지 주변에 텍스트를 감싸는 용도로 사용합니다. 레이아웃에는 df(flex)나 dg(grid)를 우선 사용하세요.

클래스 목록

클래스CSS설명
flfloat: left요소를 왼쪽으로 띄움. 텍스트가 오른쪽으로 감쌈
frfloat: right요소를 오른쪽으로 띄움. 텍스트가 왼쪽으로 감쌈
fnfloat: nonefloat 해제. 일반 흐름으로 복귀
clbclear: both좌우 모든 float 해제
cllclear: left왼쪽 float만 해제
clrclear: right오른쪽 float만 해제
clnclear: noneclear 해제 (기본값)

시각적 비교

float가 텍스트 흐름에 어떤 영향을 주는지 비교합니다.

Float Left — fl

이미지가 왼쪽에 떠 있고, 텍스트가 오른쪽으로 흐릅니다. float의 가장 대표적인 사용 사례입니다. 텍스트가 충분히 길면 이미지 아래로도 이어집니다. 이것이 float의 원래 목적인 텍스트 감싸기(text wrapping)입니다.

Float Right — fr

이미지가 오른쪽에 떠 있고, 텍스트가 왼쪽으로 흐릅니다. 프로필 이미지나 썸네일을 우측에 배치할 때 사용합니다. 텍스트가 이미지 높이를 넘으면 아래로 자연스럽게 이어집니다.

Clear 없이 float 사용 시 문제

float 요소 뒤에 clear가 없으면 부모 높이가 무너집니다

clb(clear: both)를 추가하면 부모가 정상적으로 float 요소를 감쌉니다

clear가 필요한 이유

float된 요소는 일반 흐름에서 벗어나므로 부모 요소가 float된 자식의 높이를 인식하지 못합니다. 이로 인해 부모의 높이가 0이 되거나, 뒤따르는 요소가 float 요소 아래로 겹쳐 올라가는 문제가 발생합니다.

해결 방법클래스설명
빈 div로 clearclbfloat 요소 뒤에 <div class="clb"></div> 추가
다음 요소에 clearclbfloat 다음 블록 요소에 clb 적용
부모에 overflowoh부모에 overflow: hidden으로 BFC 형성

클래스별 상세

flfloat: left

요소를 왼쪽으로 띄워 뒤따르는 콘텐츠가 오른쪽으로 감싸도록 합니다. 이미지 주변에 텍스트를 흘리는 전통적인 방식입니다.

<!-- 이미지 왼쪽, 텍스트 감싸기 -->
<div class="oh">
  <img class="fl mr16px mb8px w12rem" src="/photo.jpg" alt="사진" />
  <p>이미지가 왼쪽에 떠 있고, 이 텍스트는 이미지의
     오른쪽으로 흐릅니다. 텍스트가 길어지면 이미지
     아래로 자연스럽게 이어집니다.</p>
</div>

<!-- 여러 요소를 왼쪽으로 나열 -->
<div class="oh">
  <div class="fl w10rem h10rem bg18181B mr16px br8px">1</div>
  <div class="fl w10rem h10rem bg27272A mr16px br8px">2</div>
  <div class="fl w10rem h10rem bg18181B br8px">3</div>
  <div class="clb"></div>
</div>

frfloat: right

요소를 오른쪽으로 띄워 뒤따르는 콘텐츠가 왼쪽으로 감싸도록 합니다. 프로필 이미지, 인용 블록 등을 우측에 배치할 때 사용합니다.

<!-- 프로필 이미지 오른쪽 배치 -->
<div class="oh">
  <img class="fr ml16px mb8px w10rem br8px" src="/avatar.jpg" alt="프로필" />
  <h3>사용자 이름</h3>
  <p>프로필 이미지가 오른쪽에 떠 있고,
     사용자 정보가 왼쪽에 표시됩니다.</p>
</div>

fnfloat: none

float를 해제하여 요소를 일반 흐름으로 되돌립니다. 반응형에서 데스크탑은 float, 모바일은 해제할 때 유용합니다.

<!-- 반응형: 데스크탑은 float, 모바일은 해제 -->
<img class="fl sm-fn mr16px mb8px w12rem sm-w100p" src="/photo.jpg" />
<p>데스크탑에서는 이미지가 왼쪽에 떠 있고,
   모바일에서는 이미지가 전체 너비로 표시됩니다.</p>
<div class="clb"></div>

clbclear: both

좌우 모든 float를 해제합니다. float 요소 다음에 빈 div로 추가하거나, 다음 블록 요소에 적용하여 float 영향을 차단합니다. 가장 많이 쓰이는 clear 값입니다.

<!-- float 후 clear 패턴 -->
<div>
  <div class="fl w50p bg18181B p2rem">왼쪽 영역</div>
  <div class="fl w50p bg27272A p2rem">오른쪽 영역</div>
  <div class="clb"></div>
</div>
<p>이 텍스트는 float 영역 아래에 정상적으로 위치합니다.</p>

<!-- 이미지 + 텍스트 감싸기 후 clear -->
<div>
  <img class="fl mr16px mb8px" src="/photo.jpg" />
  <p>이미지 옆으로 텍스트가 흐릅니다...</p>
  <div class="clb"></div>
</div>

cllclear: left

왼쪽 float만 해제합니다. 왼쪽 float 요소 아래로 이동하되, 오른쪽 float는 유지하고 싶을 때 사용합니다.

<!-- 왼쪽 float만 clear -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="cll">이 요소는 왼쪽 float 아래로 이동하지만,
  오른쪽 float 옆에 위치할 수 있습니다.</div>
<div class="clb"></div>

clrclear: right

오른쪽 float만 해제합니다. 오른쪽 float 요소 아래로 이동하되, 왼쪽 float는 유지하고 싶을 때 사용합니다.

<!-- 오른쪽 float만 clear -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="clr">이 요소는 오른쪽 float 아래로 이동하지만,
  왼쪽 float 옆에 위치할 수 있습니다.</div>
<div class="clb"></div>

clnclear: none

clear를 해제합니다. 기본값이며, 다른 곳에서 설정된 clear를 되돌릴 때 사용합니다.

<!-- clear 해제 (반응형) -->
<div class="clb sm-cln">
  데스크탑에서는 clear: both, 모바일에서는 clear 해제
</div>

팁 & 주의사항

레이아웃에는 flex/grid 사용

float는 레거시 레이아웃 방식입니다. 2단, 3단 레이아웃에는 df(flex)나 dg(grid)를 사용하세요.

텍스트 감싸기에 여전히 유용

이미지 주변으로 텍스트를 감싸는 것은 float의 원래 목적이며, flex/grid로 대체할 수 없는 고유 기능입니다.

float 후 반드시 clear

float 사용 후에는 clb(clear: both)를 추가하세요. 빈 div에 clb를 적용하거나, 부모에 oh(overflow: hidden)를 설정하면 됩니다.

overflow: hidden으로 감싸기

부모에 oh를 적용하면 clear 없이도 float된 자식을 감쌀 수 있습니다. BFC(Block Formatting Context)를 형성하기 때문입니다.

displayclearoverflow