웹 개발 & 정보/HTML (CSS)

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

Rozera 2017. 9. 21. 15:50
반응형


<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; 를 사용하는 것도 괜찮은 방법 같습니다.



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


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

반응형