CSS에서 텍스트가 없는 부모 내 float 속성

클래스가 parent인 div가 있고, 그 안에 클래스 child를 가진 두 개의 자식 블록이 있지만 텍스트는 없는 상황을 가정해 보겠습니다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

자식 블록들을 왼쪽으로 플로팅(띄움) 처리하고 어떻게 되는지 살펴보겠습니다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

보시다시피, 자식 블록들이 가로로 정렬되었지만, 부모 요소의 높이가 사라져 자식 블록들이 부모 아래쪽으로 빠져나온 것을 확인할 수 있습니다.

이러한 동작은 이미 알고 계실 것입니다. 문제를 해결하기 위해서는 클리어픽스를 사용해야 합니다. 한번 적용해 보겠습니다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="clearfix"></div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

.clearfix {
  clear: both;
}

Результат: