float 를 해제하는 방법 업데이트

float 는 띄우다 라는 뜻으로 css 코드 입니다. 

좌우측으로 배치를 할때 사용하는데요. float: left 하면 왼쪽으로 요소를 배치합니다.

특히 레이아웃을 마크업할때 많이 사용합니다.


float 문제는 요소를 띄우다보니 float 를 사용한 부모요소가 자식요소의 높이를 몰라 다른 컨텐츠와 레이아웃이 겹치게 됩니다.

그래서 float 를 사용하면 반드시 해제를 시켜줘야 합니다.


이전에도 이와 비슷한 글을 쓴적이 있는데요. float 를 해제하는 방법은 여러가지가 있기 때문입니다.

float 속성[정렬] IE 해결법 -> http://demun.tistory.com/1889

float 를 해결하는 방법 -> http://demun.tistory.com/1932


그럼 오늘은 왜 쓰냐?

요것도 업데이트 됐습니다.


주로 사용하는것이 아래의 코드입니다.


.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


이는 float 를 사용한 부모요소에 clearfix 클래스를 줌으로써 float 을 해제하는 방법입니다.

왜 이런 코드를 사용하는지는 여기에 보시면 잘 설명이 되어있습니다.

아마도 여러분의 스킨에 위와같은 코드가 있는지 한번 살펴보세요.


헌데 이것도 완벽하지는 않았습니다. 왜냐면 그 유명한 IE6,7 때문이였습니다.

그래서 제프스타(Jeff Starr)가 이걸 업데이트해서 아래처럼 사용하게 되었습니다.


.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


이 코드도 업데이트 됩니다. 위에서의 font-size:0 부분이 없어집니다.

"micro" clearfix 에 대한 글을 참고하세요.


결과론적으로 아래와 같이 다시 업데이트 됩니다.

여기서 .group 는 해당 클래스 입니다.


.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


2012년 다시 업데이트 되는데요. 이는 IE6,7 이 필요없다는 결론을 내렸습니다.

위처럼 IE만의 속성인 zoom 을 사용하지 않고, IE8까지 해당되는 다음의 코드를 사용합니다.

저도 현재는 아래의 코드를 사용하는데요. 이유는 간단하기 때문입니다.


최종 float 해제 코드

.group:after {
  content: "";
  display: table;
  clear: both;
}


참고로 오페라에 대한 버그가 있어서 폰트에 대한 설정도 추가적으로 해줘야 한다는 의견도 있습니다.

그래서 부트스트랩은 line-height:0 같은 코드를 추가해서 사용하는 군요.

참고 주소 : http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952


개    개