[CSS] 클리어픽스(clearfix)

클리어픽스(clearfix)란

float으로 인하여 아래와 같이 영역이 깨져버리는 현상이 발생한다면...

즉 height 값이 사라져 영역이 깨진다면...

 

 

overflow: hidden;을 사용하여 영역을 잡을 수 있지만 불안정.

이때, float을 사용한 상위(부모)박스에 .clearfix를 설정하면

float 으로 인하여 영역이 깨지는 현상을 방지하게 된다.

결국 .clearfix는 영역을 잡아주기 위한 css 속성.

 

 

클리어픽스의 사용방법은 다음과 같다.

/* CSS */
.clearfix:before, .clearfix:after {
    display: block;
    content: '';
    line-height: 0;
}

.clearfix:after {
    clear:both;
}

.clearfix {
	*zoom: 1;
}

 

• :before, :after - 가상요소를 사용하여 컨텐츠를 사용하는 속성

• clear:both - float의 성질을 양쪽에서 차단하는 역할

• *zoom:1; - 익스플로러7 이하의 버전에 영역을 잡기위한 요소. (지금은 사용할 필요 없음)