Archive / Css / 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; 속성을 주게 되면 자동으로 클리어가 된다. 이 방법은 매우 유용하지만 포함하고 있는 컨텐츠가 블록의 크기보다 커질경우 스크롤바가 생기기 때문에 주의해서 사용해야 한다.