clear

float된 블록의 float속성을 없애 준다.

left

float: left; 속성을 없애줌

right

float: right; 속성을 없애줌

both

모든 float 속성을 없애줌

플로트 된 컨텐츠만 포함한 블록을 클리어 하는 방법

플로트 된 블록만 포함한 블록의 경우 높이가 0이 되어서 배경이미지나 경계선등이 원하는 대로 표현되지 않는다.

IE Auto Clearing

IE 의 경우에는 width나 height 속성을 주어 hasLayout을 true로 하면 자동으로 높이가 플로트된 블록을 모두 포함할 수 있게 계산된다. 표준 스펙에는 위배되는 계산 방식이다.

클리어용 엘리먼트 삽입

플로트 블록의 맨 마지막에 아래와 같이 하나의 클리어용 div를 넣어서 높이를 유지할 수 있다.

<div style="clear: both; font-size: 1px; line-height: 1px;">&nbsp;</div>

하지만 이 방법은 불필요한 엘리먼트를 하나 추가하게 되기 때문에 그다지 바람직하지 않다.

content 속성 사용

CSS의 content속성을 이용하여 클리어용 엘리먼트를 넣는 방법이다. 가장 좋은 방법이지만 IE가 content속성을 지원하지 않아서 hack을 써야하는 단점이 있다.

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

overflow 속성 이용

높이가 0으로 계산된 블록에 overflow: auto; 속성을 주게 되면 자동으로 클리어가 된다. 이 방법은 매우 유용하지만 포함하고 있는 컨텐츠가 블록의 크기보다 커질경우 스크롤바가 생기기 때문에 주의해서 사용해야 한다.

display 속성 이용

A new micro clearfix hack. content 속성을 사용하는 방법과 매우 유사하지만 display: table을 사용해서 코드의 양을 훨씬 줄인 방법이다. 구버전의 파이어폭스에서는 주의를 해야 한다.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}