float된 자식의 높이를 부모가 감싸안도록 만들기

CSS에서 디자인을 하다가 float된 요소를 자식으로 품고 있는 부모가 같이 float되지 않은 경우 자식이 부모 밖으로 튀어나가는 경우를 볼 수 있다. 위처럼 말이다.

이런 경우 가장 깔금한 해결책(가상 선택자 :after와 zoom:1)을 담은 글을 발견해서 아래 경로에서 볼 수 있다.

원문은 http://naradesign.net/open_content/lecture/wp/ 에서 볼 수 있다. 원문에는 모든 해결책의 유형을 제시하고 있다.

<style type="text/css">

.wrap { background:#CCCCCC; width:600px;}

.wrap:after { content:""; clear:both; display:block; *zoom:1;}

</style>