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
