CSS에서 클리어픽스와 부모 요소의 높이

클래스가 parent인 하나의 div를 남겨두고, 텍스트는 제거한 채 플로팅 이미지만 남겨둡시다. 이미 알고 계시듯이, 이 경우 div의 높이는 0으로 축소되어, 상하 테두리만 남게 됩니다. 이미지는 div 아래로 삐져나오게 됩니다:

html<div class="parent">
  <img src="img.png" alt="">
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

Результат:

플로팅 이미지가 우리 div의 높이를 확장하도록 해봅시다. 이를 위해 교묘한 방법이 사용됩니다. 이미지 뒤에 텍스트 없이 클래스가 clearfix인 div를 배치하는 것입니다.

우리 이미지는 플로팅 요소이므로 부모의 높이를 확장하지 않지만, div-클리어픽스는 플로팅되지 않고 부모의 높이에 영향을 미칩니다.

div-클리어픽스에 clear 속성이 지정되어 있기 때문에, 이 요소는 이미지에 의해 아래로 밀려나 이미지 아래에 위치하게 되며, 이 과정에서 부모의 높이를 확장합니다.

div-클리어픽스 자체는 비어 있어 화면에 보이지 않지만, 부모의 높이를 확장하는 역할을 합니다.

자, 이제 시도해 봅시다:

html<div class="parent">
  <img src="img.png" alt="">
  <div class="clearfix"></div>
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат: