height: 0; 해결방법

height를 딱히 0으로 지정하지 않았는데 0으로 잡힐 때는 하위요소가 float 되었을 때 발생한다.

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>

ul li { float: left; } /* 혹은 float: right; */

 

이렇게 하위 요소에 float을 적용하면 상위 요소는 height가 0으로 잡히는데 이 때 해결방법은 다음과 같다.

 

/* 1 */
ul { overflow: hidden; }

/* 2 */
ul { display: inline-block; }

/* 3 */
ul:after { display:block; content: ''; clear: both; }

 

나는 첫 번째 방법이 간편해서 overflow hidden을 많이 쓰는 편이긴 한데, 처음 css 배울 때는 세 번째 방법으로 배운 기억이 있다. 마지막 방법같은 경우에는 after 요소로 매번 사용하는 것 보다 따로 클래스를 만들어 적용하는게 편하기도 함.