CSS에서 텍스트가 없는 부모 내 float 속성
클래스가 parent인 div가 있고, 그 안에
클래스 child를 가진 두 개의 자식 블록이 있지만
텍스트는 없는 상황을 가정해 보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
자식 블록들을 왼쪽으로 플로팅(띄움) 처리하고 어떻게 되는지 살펴보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
보시다시피, 자식 블록들이 가로로 정렬되었지만, 부모 요소의 높이가 사라져 자식 블록들이 부모 아래쪽으로 빠져나온 것을 확인할 수 있습니다.
이러한 동작은 이미 알고 계실 것입니다. 문제를 해결하기 위해서는 클리어픽스를 사용해야 합니다. 한번 적용해 보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="clearfix"></div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
.clearfix {
clear: both;
}
:
