Clearfix

float 현상을 제거하는 clearfix 테그닉

CSS의 float 속성 뒤에 clear:both를 지정하면 float현상을 제가할 수 있습니다. 이어지는 태그가 없는 경우에는 clear:both로 제거할 수 없을 수도 있습니다. 이런 경우 도움이 되는 것이 "clearfix"라고 불리는 CSS 테그닉입니다.

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

태그(ul.menu li)를 감싸고 있는 태그(ul.menu)를 지정하고 after 유사 태그와 content속성으로 태그를 만들어서 삽입합니다. display 속성을 "block"으로 변경하고 clear:both를 적용함으로써 float현상은 제거됩니다. 이대로라면 브라우저 위에 있는 표시 영역이 확보되기 때문에 마지막에 visibility:hidden 혹은 height:0를 이용하여 확보된 영역이 보이지 않도록 변경합니다.

이 방법은 after 태그를 지원하지 않는 IE6-7에서는 이용할 수 없습니다. IE6-7에서는 독자적으로 제공하는 zoom 속성을 설정하는 것으로 float 현상을 제거할 수 있습니다.

							ul.menu{
								zoom:1;
							}