[HTML/CSS] CSS : clearfix 방법 | 가상요소, overflow, clear, float

float를 사용하다보면 필요한 순간이 생기는 clearfix방법 4가지를 알아보고자 한다.

 

CSS float

float는 element에 부유 속성을 줘 배치할 수 있는 방법으로 메뉴부분에 주고 사용된다.

• left, right을 사용할 수 있으며 해당 위치에 떠있게 된다.
• display 속성과 함께 쓰면 display 속성은 무시된다.
• width, height 설정이 가능하다

float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다.
이러한 현상은 브라우저의 오류로 생겨난 것이고, 이를 해결하기위해서는 clearfix를 사용하는데

위의 오류를 해결하기 위한 일종의 버그 해결 방법이다.

 

CSS clearfix

clearfix는 네가지 방법이 있으며, 각 방법에 대해 알아보자.

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

 

1. 가상 요소 ::after 사용(권장)

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

 

가상 클래스(Pseudo-class)란?

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

 

가상 요소(Pseudo-elements)란?

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것이다.

보통 ::after, ::before를 자주 사용하는 편이다.

사용할 때에는 클래스명::after, 클래스명::before 이런식으로 주는 편이며,

css에서는 클랙스명::after {content:''; display: block;} 처럼 작업을 하여 float를 초기화 시키겠다는 뜻이다.

 

2. overflow속성 사용

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

 

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

가상요소::after와 비슷한 개념으로

빈 태그를 만들어 클래스에 clear: both; height: 0; overflow: hidden;을 적용해
높이가 0인 보이지 않는 태그를 만들어 float을 해제하는 방법이다.
의미없는 태그를 만들어 사용하는 것으로 작업 방식에 따라 사용하는 것이 좋다.

 

4. float로 대응

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

하지만, 어쩔 수 없는 경우에는 사용하는 방법으로 제일 마지막 방법이라고 생각하면 된다.