AAtomic CSS

float & clear

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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 요소 아래로 겹쳐 올라가는 문제가 발생합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">해결 방법클래스설명
빈 div로 clearclbfloat 요소 뒤에 <div class=\"clb\"></div> 추가
다음 요소에 clearclbfloat 다음 블록 요소에 clb 적용
부모에 overflowoh부모에 overflow: hidden으로 BFC 형성

클래스별 상세

flfloat: left

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

<!-- Image left, text wrapping -->
<div class="oh">
  <img class="fl mr16px mb8px w12rem" src="/photo.jpg" alt="Photo" />
  <p>Image floats left, and this text flows to the
     right of the image. When text is long, it continues
     naturally below the image.</p>
</div>

<!-- Arrange multiple elements to the left -->
<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

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

<!-- Profile image right placement -->
<div class="oh">
  <img class="fr ml16px mb8px w10rem br8px" src="/avatar.jpg" alt="Profile" />
  <h3>User name</h3>
  <p>Profile image floats right,
     User info is displayed on the left.</p>
</div>

fnfloat: none

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

<!-- Responsive: desktop float, mobile disabled -->
<img class="fl sm-fn mr16px mb8px w12rem sm-w100p" src="/photo.jpg" />
<p>On desktop the image floats left,
   on mobile the image displays full width.</p>
<div class="clb"></div>

clbclear: both

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

<!-- Clear pattern after float -->
<div>
  <div class="fl w50p bg18181B p2rem">Left area</div>
  <div class="fl w50p bg27272A p2rem">Right area</div>
  <div class="clb"></div>
</div>
<p>This text is positioned normally below the float area.</p>

<!-- Clear after image + text wrapping -->
<div>
  <img class="fl mr16px mb8px" src="/photo.jpg" />
  <p>Text flows beside the image...</p>
  <div class="clb"></div>
</div>

cllclear: left

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

<!-- Clear left float only -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="cll">This element moves below left float, but
  can be positioned beside right float.</div>
<div class="clb"></div>

clrclear: right

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

<!-- Clear right float only -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="clr">This element moves below right float, but
  can be positioned beside left float.</div>
<div class="clb"></div>

clnclear: none

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

<!-- Disable clear (responsive) -->
<div class="clb sm-cln">
  Desktop: clear: both, mobile: clear disabled
</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