clear

clear (플로트 해제)

요소를 앞선 떠 있는(float) 요소들 아래로 배치할지를 정하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`clear-left`	`clear: left;`
`clear-right`	`clear: right;`
`clear-both`	`clear: both;`
`clear-start`	`clear: inline-start;`
`clear-end`	`clear: inline-end;`
`clear-none`	`clear: none;`

Examples

Clearing left

clear-left 유틸리티를 사용해서 요소를 앞선 왼쪽(float-left) 플로트 요소들 아래에 배치할 수 있어요.

<article>
  <img class="float-left ..." src="/img/snow-mountains.jpg" />
  <img class="float-right ..." src="/img/green-mountains.jpg" />
  <p class="clear-left ...">Maybe we can live without libraries...</p>
</article>

Clearing right

clear-right 유틸리티를 사용해서 요소를 앞선 오른쪽(float-right) 플로트 요소들 아래에 배치할 수 있어요.

<article>
  <img class="float-left ..." src="/img/green-mountains.jpg" />
  <img class="float-right ..." src="/img/snow-mountains.jpg" />
  <p class="clear-right ...">Maybe we can live without libraries...</p>
</article>

Clearing all

clear-both 유틸리티를 사용해서 요소를 앞선 모든 플로트 요소들 아래에 배치할 수 있어요.

<article>
  <img class="float-left ..." src="/img/snow-mountains.jpg" />
  <img class="float-right ..." src="/img/green-mountains.jpg" />
  <p class="clear-both ...">Maybe we can live without libraries...</p>
</article>

Using logical properties

clear-start 와 clear-end 유틸리티는 논리 속성(logical properties)을 사용해서 텍스트 방향에 따라 왼쪽이나 오른쪽에 매핑돼요.

<article dir="rtl">
  <img class="float-left ..." src="/img/green-mountains.jpg" />
  <img class="float-right ..." src="/img/green-mountains.jpg" />
  <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p>
</article>

Disabling clears

clear-none 유틸리티를 사용하면 요소에 적용된 클리어를 모두 초기화할 수 있어요.

<article>
  <img class="float-left ..." src="/img/green-mountains.jpg" />
  <img class="float-right ..." src="/img/snow-mountains.jpg" />
  <p class="clear-none ...">Maybe we can live without libraries...</p>
</article>

Responsive design

clear 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<p class="clear-left md:clear-none ...">
  Lorem ipsum dolor sit amet...
</p>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.