AAtomic CSS

clear

float된 요소의 영향을 해제하여 요소가 float 아래로 이동하도록 합니다. float 사용 후 레이아웃 붕괴를 방지하는 데 필수적입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
clbclear: both좌우 모든 float 해제. 가장 많이 사용
cllclear: left왼쪽 float만 해제
clrclear: right오른쪽 float만 해제
clnclear: noneclear 해제 (기본값)

사용 예시

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

<!-- 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">Moves below left float</div>
<div class="clb"></div>

<!-- Responsive clear -->
<div class="clb sm-cln">
  Desktop: clear: both, mobile: disabled
</div>

시각적 비교

clear 없이 — 부모 높이 붕괴

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

clb 적용 — 정상 동작

clb(clear: both)로 부모가 float 요소를 정상적으로 감쌈

팁 & 주의사항

대부분 clb로 충분

좌우 구분 없이 모든 float를 해제하는 clb(clear: both)가 가장 안전하고 많이 사용됩니다.

overflow: hidden 대안

부모 요소에 oh(overflow: hidden)를 적용하면 clear 없이도 float된 자식을 감쌀 수 있습니다.

floatoverflowdisplay