in English
클리어픽스
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>