float시 부모의 height가 0이 되는 경우

li를 float 시키면, ul의 height 값이 0이 되어버린다.

height를 직접 지정하기에는 브라우저마다 계산 방식 및 렌더링 방식이 다르기 때문에 1px 정도 오차가 있을 수 있다.

자세히 찾아보지 않아 버그인지는 잘 모르겠지만, 이전에는 이 문제 때문에 display: inline-block;을 더 선호했다.


div {
    position: relative;
    display: block;
}

li {
    width: 100px;
    height: 100px;
    float: left;
    list-style: none;
    background-color: #eee;
    border: 1px solid #ddd;
}


<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<p>This is &lt;p&gt; Tag.</p>

위 사진을 보면 ul의 height 값이 0이 되어, p 태그의 위치가 아래가 아닌 옆에 위치하는 것을 볼 수 있다.

구글링을 통해 찾아봤을 때 좋은 해결 방안이 몇 가지 있어 소개하려 한다.


.clearfix::after {
    content: '';
    clear: both;
    display: block;
}


<div>
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<p>This is &lt;p&gt; Tag.</p>

float 되어 높이가 사라진 li 대신에 가상 선택자를 이용하여 높이를 담당할 Element를 만드는 방식이다.

이 방법은 IE 8에서도 지원하는데, IE 7 이하는 다른 방법을 이용하여 해결해야한다.


ul {
    overflow: hidden; /* auto로 해도 무관함 */
}

나중에 알게 되었지만 단 한 줄로 해결된다는게 놀라움 따름이다.

다람쥐 헌 쳇바퀴에 타고파

float시 부모의 height가 0이 되는 경우