클리어픽스

clearfix 유틸리티를 추가하여 컨테이너 내의 부동 콘텐츠를 빠르고 쉽게 지울 수 있습니다.

상위 요소float 에 추가하여 s를 쉽게 지웁니다 . 믹스인으로도 사용할 수 있습니다..clearfix

HTML에서 사용:

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

믹스인 소스 코드:

@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>