float을 clear하는 방법(clearfix)

마크업 후에 CSS작업을 하다보면 가장 많이 겪는 순간이 상단 네비게이션바를 만들 때 float속성으로 원하는 곳에 배치를 하면 그 다음에 오는 태그들의 위치가 뭉개지는 경우가 허다한데
원래 float 뒤에 포지션이 뭉개지는 현상은 브라우저상의 오류로 생겨난 것이고, 이를 해결하는 clearfix는 위의 오류를 해결하기 위해 똑똑한 분들이 만들어낸 일종의 버그해결 방법이다.

clearfix의 네 가지 방법

  1. 가상 요소 ::after 사용(권장)
  2. overflow속성 사용
  3. 빈 엘리먼트로 clear속성 적용
  4. float로 대응

하지만 1번 방법만 알고 사용하면 되기 때문에 나머지는 간략하게 설명하겠음

1. 가상 요소 ::after 사용

우선 가상 선택자가 무엇인지 알아보면,
가상 클래스(class)와 가상 요소(element)를 편의상 함께 칭할 때 사용하며, 정식 명칭은 아님.

가상 클래스(Pseudo-class)는 요소에 직접적으로 클래스를 부여하지는 않았지만, 요소의 상태에 따라서 클래스를 적용한 것처럼 효과를 다르게 줄 수있다.
가장 많이 쓰는 예시는 a태그의 효과를 바꾸기 위해 a:hover, a:link 이고, 이때 a뒤에 쓰인 :hover, :link를 가상 클래스라고 한다.

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것이다. 보통 ::after, ::before을 자주 사용한다.

CSS2.1에서는 가상 클래스와 가상 요소 모두 싱글콜론(:)을 사용했지만, CSS3 부터는 둘을 구분하기 위해 가상 클래스는 싱글콜론(:), 가상 요소는 더블콜론(::)을 사용한다.

그럼 ::after로 어떻게 clearfix를 하는지 알아보면
float 속성을 적용한 요소의 부모요소에 ::after를 사용해주면 된다.
예시로 nav태그 안에 h1태그는 float: left, ul태그에 float: right가 적용되어 있다면, 다음과 같이 작성해주면 된다.

nav::after {
    content: '';
    dispaly: table;
    clear: both
}

무슨 뜻인지 알아보면
nav 태그 뒤에 내용이 빈(content: '') 테이블을(display: table) 만들고, float: left, float: right를 초기화 시키겠다는 뜻이다.
이렇게 작성을 해주면 nav태그 뒤에 다른 내용을 작성을 하면 위로 딸려올라가지 않고 nav태그 다음에 위치하게 된다.

여기서 display: table 대신 display: block을 쓰는 것도 가능하고,
clear: left를 쓰면 float: left를, clear: right를 쓰면 float: right를 초기화 한다는 뜻인데 항상 clear: both를 사용해도 상관이 없다.

2. overflow속성 사용

위와 마찬가지로 float를 가진 요소의 부모 요소에 overflow: hidden 또는 overflow: auto를 적용시켜주면 된다.
overflow: auto 사용시 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생기고,
overflow: hidden의 경우 넘치는 부분이 잘리기 때문에 사용하지 않는것이 좋음.

3. 빈 엘리먼트로clear속성 적용

1번에 설명한것과 비슷한 개념인데 위에서는 가상 요소를 사용했지만 이 방법은 빈 태그를 만들어 클래스에 clear: both; height: 0; overflow: hidden;을 적용해 높이가 0인 보이지 않는 태그를 만들어 clear: both float를 해제하는 방법인데, 의미없는 태그를 만들어 사용하는 것이므로 사용하지 않는것이 좋음.

4. float로 대응

float속성을 가진 자식요소의 부모요소에 똑같이 float를 적용해 주는 방법인데 반응형 웹에 적합하지 않으므로 사용하지 않는것이 좋음

결론

그냥 1번빼고 다른것은 ‘이런게있구나~’ 하고 넘기고 1번만 잘 사용할줄 알면 문제없이 포지셔닝의 고수가 되어있을 것이다!
그리고 이러한 모든 고민은 flex-box를 사용하면 부질없는 행동이었음을 다시한번 깨닫기 때문에, flex-box를 공부해 사용하는것을 추천!(다음에 포스팅 해보도록 하겠습니다)

'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (0) 2017.04.13

+ Recent posts