Clearfix

Clearfix (클리어픽스)

.clearfix 유틸리티로 부모 요소의 float를 쉽게 해제하는 방법과, SCSS 믹스인으로 사용하는 방법을 정리한 문서예요.

출처: 문서

본문

부모 요소에 .clearfix를 추가하면 float를 쉽게 해제할 수 있어요. 믹스인으로도 사용할 수 있답니다.

HTML에서 사용하기:

<div class="clearfix">...</div>

믹스인 소스 코드:

scss/mixins/_clearfix.scss 

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

SCSS에서 믹스인 사용하기:

.element {
  @include clearfix;
}

아래 예시는 clearfix를 어떻게 사용하는지 보여 줘요. clearfix가 없으면 감싸는 div가 버튼 주위로 감싸지지 않아서 레이아웃이 깨질 수 있어요.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>

더 알아보기 (Learn more)