CSS 만으로 clear float 문제 해결하기

어떤 상자 안에 또 상자가 있는 형태일 때!!

안에 있는 상자를 float 하면???

이렇게 됩니다.
녹색 상자가 파란색 상자를 덮을만큼 길어지면 좋겠는데... 그럼 이걸 어떻게 해결할까요???

바로 이런 모습으로~

해결법은!!!

파란 상자의 id가 'blue' 일 때!!

<style type="text/css">
#blue:after {

    clear:both;
    display:block;
    content:"";

}
</style>

로 스타일을 정의해 주는 것입니다. 간단하지만 유용하고 자주 쓰일 수 있는 방법인 것 같습니다.

출처: http://www.positioniseverything.net/easyclearing.html