Float

Float (플로트)

반응형 float 유틸리티로 어떤 브레이크포인트에서든 어떤 요소든 플로트를 토글하는 방법에 대해 알아봅니다.

출처: 문서

본문

개요 (Overview)

이 유틸리티 클래스들은 CSS float 프로퍼티를 사용해 현재 뷰포트 크기에 따라 요소를 왼쪽이나 오른쪽으로 플로트시키거나 플로트를 비활성화합니다. 특이성(specificity) 문제를 피하기 위해 !important가 포함되어 있습니다. 이들은 그리드 시스템과 동일한 뷰포트 브레이크포인트를 사용합니다. float 유틸리티는 플렉스 아이템에는 효과가 없다는 점을 알아두세요.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don’t float on all viewport sizes</div>

부모 요소에 clearfix 헬퍼를 사용해 플로트를 해제할 수 있습니다.

반응형 (Responsive)

각 float 값에 반응형 변형도 존재합니다.

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

지원되는 모든 클래스는 다음과 같습니다.

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

CSS

Sass utilities API

float 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),

더 알아보기 (Learn more)