[CSS/HTML] 자식 요소 float 일 때, 부모 요소에 height 주기

<style>
.test_ul {
    list-style:none;
    background:#bbb;
    padding:5px;
}

.test_ul li {
    float:left;
    background:#ddd;
    padding:5px;
}
</style>

<ul class="test_ul">
    <li>첫번째 li</li>
    <li>두번째 li</li>
    <li>세번째 li</li>
</ul>

결과화면)

• 첫번째 li
• 두번째 li
• 세번째 li

위 결과화면에서 float된 li의 부모 요소인 .test_ul의 영역은 padding: 5px 만큼만 잡혀있고, height 값은 0 인 모습입니다.

이런 경우에, float: left (또는 float: right) 의 부모 요소에 height 주는 방법 3가지를 소개하겠습니다.

1. overflow: hidden;

<style>
.test_ul {
    list-style:none;
    background:#bbb;
    padding:5px;


    overflow:hidden;
}


.test_ul li {
    float:left;
    background:#ddd;
    padding:5px;
}
</style>
 
<ul class="test_ul">
    <li>첫번째 li</li>
    <li>두번째 li</li>
    <li>세번째 li</li>
</ul>

결과화면)

• 첫번째 li
• 두번째 li
• 세번째 li

2. display: inline-block;

<style>
.test_ul {
    list-style:none;
    background:#bbb;
    padding:5px;
    
    display:inline-block;
}


.test_ul li {
    float:left;
    background:#ddd;
    padding:5px;
}
</style>
 
<ul class="test_ul">
    <li>첫번째 li</li>
    <li>두번째 li</li>
    <li>세번째 li</li>
</ul>

결과화면)

• 첫번째 li
• 두번째 li
• 세번째 li

3. :after - clear: both;

<style>
.test_ul {
    list-style:none;
    background:#bbb;
    padding:5px;
}


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


.test_ul li {
    float:left;
    background:#ddd;
    padding:5px;
}
</style>
 
<ul class="test_ul">
    <li>첫번째 li</li>
    <li>두번째 li</li>
    <li>세번째 li</li>
</ul>

결과화면)

• 첫번째 li
• 두번째 li
• 세번째 li

개인적으로 이런 경우에는 overflow: hidden 을 주로 사용했지만

하위 요소가 잘리면 안되는 경우 등 상황에 따라서 3번의 clear: both; 를 사용하는 것도 괜찮은 방법 같습니다.

포스팅 내용에서 오류나 문제점을 발견하시거나, 더 좋은 방법이 있다면

피드백 남겨주시면 감사하겠습니다. ^^