mixin을 이용해 float을 clear하기

div나 span과 같은 요소에 float 속성을 적용하여 위치를 잡다보면 부모 요소의 height가 float 속성을 가진 요소를 포함하지 못하여 레이아웃이 비정상적으로 출력되는 경우가 있다.

이에 대해 검색해 보면 무슨 방법이니 무슨 방법이니 설명이 많이 되어 있지만, 다 필요 없고 부모 요소에 가상 클래스 :after 를 주고 빈 block 영역을 만들어 clear 값을 both로 설정하면 자식 요소의 float: left 나 float: right 를 초기화시켜 준다. 레이아웃이 정상적으로 표시될 것이다. CSS에서 코드는 다음과 같다.

부모 요소:after {
	content: "";
	display: block;
	clear: both;
}

그런데 float을 초기화 시켜줘야 하는 부모 요소가 하나면 상관없지만, 2개 3개를 훌쩍 넘어서게 되면 매번 입력하기가 힘들다. Class를 만들어서 적용시켜주는 방법도 있지만 SCSS에서는 mixin을 만들어 해당 부모 요소에 직접 설정할 수도 있다.

mixin 코드는 다음과 같다.

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

사용할 때는 아래 코드를 입력해 준다.

@include clearfix();

예를 들어, 아래와 같이 입력했다면

section {
	padding: 1em;
	@include clearfix();
}

컴파일된 CSS 파일에는 다음과 같이 표시된다.

section {
	padding: 1em;
}

section:after {
	content: "";
	display: block;
	clear: both;
}