또 다른 태그 추가없이 CSS float을 지우기

CSS에 'float:left'가 설정된 경우 float속성을 추가 태그없이 clear시키는 방법에 대한 소개가 올라왔네요.

1. Floating the containing element as well.

.container-with-float {

float: left;
width: 100%;

}

width를 100%로 설정함으로서 float설정을 준 다음의 위치에 줄 바꿈(line-break)을 준 효과를 냅니다.
단점으로 a) 원하는 패딩효과가 다를 수 있습니다. b) IE6에서 아래쪽 마진(bottom margin)이 들어가는 경우가 있습니다.

2. Using overflow: hidden on the container.

.container-with-overflow {

overflow: hidden;
height: 1%;

}

container에 overflow:hidden을 추가함으로서 자동적으로 높이를 조절하고, floating된 컨텐츠를 알아서 처리해줍니다.

단점으로 a) 유동적인 높이를 원하는 경우, 원하는 동작과 다른 동작이 발생할 수 있습니다. b) IE6에서는 floating 되었음을 알리기 위해서 height:1%; 또는 zoom:1;을 사용해야 합니다.

3. Generating content using the :after  CSS pseudo-class

.container-with-generated-content {

height: 1%;

}
.container-with-generated-content:after {

content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

container 뒤에 올 element에 :after(pseudo-class)의 css 속성을 추가함으로서 clear시킬 수 있습니다만 container 뒤에 element가 추가되어야 하는 문제점을 가지고 있습니다. . 단점, IE에서 :after를 지원하지 않는 가장 큰 문제점이 있습니다.

출처 : How to clear CSS floats without markup via Vitamin News