AAtomic CSS

clear

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

클래스 목록

클래스CSS설명
clbclear: both좌우 모든 float 해제. 가장 많이 사용
cllclear: left왼쪽 float만 해제
clrclear: right오른쪽 float만 해제
clnclear: noneclear 해제 (기본값)

사용 예시

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

<!-- 왼쪽 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 아래로 이동</div>
<div class="clb"></div>

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

시각적 비교

clear 없이 — 부모 높이 붕괴

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

clb 적용 — 정상 동작

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

팁 & 주의사항

대부분 clb로 충분

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

overflow: hidden 대안

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

floatoverflowdisplay