CSS 의 float 은 position 과 함께 레이아웃을 잡는데 사용할 수 있는 속성입니다. position 은 블록의 위치와 크기가 fix 되어 있는 상황에서는 아주 좋은 방법이지만 블록의 크기(높이)가 자유롭게 변할 수 있는 레이아웃의 column 에 사용하기에는 힘듭니다. min-height 나 min-width 등과 같이 사용하면 되지만 min-height 자체를 확정지을 수 없는 경우도 있습니다.

그래서 보통 3-col 레이아웃 같은 경우는 float 을 사용하게 됩니다. float 의 경우 아래의 블록(푸터 같은 것들)에서 clear 해주면 되기 때문에 높이가 변하는 레이아웃에 아주 유용합니다. 하지만 float 은 화면 상에서 위치를 차지하지 않기 때문에 상위 엘리먼트의 border 나 background 가 원하는 대로 나오지 않게 됩니다.

그래서 많은 사람들이 float 된 layout 을 사용할때 clear 에관한 고민을 해 왔습니다.

가장 처음에 시도된 것은 float 된 블록만을 가지고 있는 상위 엘리먼트 하단에 clear 기능을 해주는 블록을 넣는 것(The Markup Method)이었습니다. 하지만 이것은 불필요한 clear 를 위한 markup 을 추가해야하기 때문에 markup이 완전치 못하다는 단점이 있었습니다.

그 다음으로 나온 방법은 CSS 로 clear 할 수 있는 element 를 추가하는 것(The Aslett/PIE Method)이었습니다. :after psuedo class 와 content 속성을 이용해서 상위 엘리먼트의 하단에 clear 할 수 있는 block element 를 추가하는 것이었습니다. 하지만 이 방법은 IE6 에서 :after psuedo class 와 content 속성을 모두 지원 안하기 때문에 IE hack 을 사용해서 IE 의 auto-clearning effect 를 같이 사용해야만 했습니다. 코드도 길고요.

그런데 최근에 아주 좋은 방법이 하나 나왔습니다. overflow: auto 를 사용하면 float 된 element 만 있어도 상위 엘리먼트가 높이에 맞게 맞춰진다는 것을 발견한 것입니다.

단점이 있다면 width 를 넘어가는 컨텐츠(큰이미지나 공백이 없는 문자열)가 있을 경우 스크롤바가 생긴다는 것입니다. 컨텐츠를 다 보기 위해서는 스크롤바가 생기는 것이 좋겠지만 일반적이지 않고 보기에도 그다지 좋지 않습니다. float 된 element 들에 overflow: hidden 을 주어서 해결 할 수도 있지만 이것의 문제는 컨텐츠가 짤리게 되어 볼 수가 없다는 것입니다.

하지만 이 방법은 추가적인 markup 도 필요 없고 css 도 아주 간단하기 때문에 유용한 방법이라고 생각 됩니다. contents 가 width 를 넘어갈 경우 IE 에서는 어쩔 수 없이 overflow: hidden 을 써야 하기 때문에, 그리고 쓸데없이 큰 이미지는 줄여서 넣어야 사이트 자체의 컨텐츠로서도 좋다는 것을 생각해 보면 컨텐츠가 짤린다고 해서 문제가 될 것 같지는 않습니다.

IE 때문에 float 레이아웃을 사용하지 않고 있었는데 이 방법으로 보다 간결하고, 쉬운 CSS 레이아웃을 작성할 수 있게 되었습니다.

Float Everything!