float:left 요소의 부모영역의 높이 차지하게 만들기

블록요소를 가로로 정렬하게 하기 위해서 보통 float:left 를 사용합니다.

하지만 이때 float 적용한 요소가 부모의 영역 초과하게 될때 부모요소는 자식의요소의 높이를 반영하지 않아 참 괴롭습니다.

보통 아래와 같이 되지요.

#ads_1

<style type="text/css">

.parent{border:2px solid #f00; min-height: 50px; width:196px}

.child{border:2px solid #00f; float:left; width:92px;height:100px}

</style>

<div class="parent">

<div class="child">AAA</div>

<div class="child">BBB</div>

</div>

AAA

BBB

이걸 해결하는 간단한 방법이 있습니다.

#ads_2

방법1)

바로 부모의 overflow 항목을 hidden 으로 주기만 하면 됩니다.

왜 그런지는 저도 이해가 잘 안되지만 결과적으론 잘 되니 만족스럽습니다.

결과는?

짜잔~

AAA

BBB

방법2)

부모 박스 뒤에 가상의 블록을 만들어 clear:both 시켜도 됩니다.

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

이렇게요.

결과는 똑같습니다.

방법1보다는 이게 더 정석이지 않을까 싶네요

#ads_3