사이트 소개

clear 프로퍼티는 float의 동작 방식을 제어하는 데 중요합니다. 아래의 두 예제를 비교해 봅시다.

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

마치 떠 있는 것만 같아요!

</div>
<section>

이 경우 section 엘리먼트는 실제로 div 다음에 있습니다. 하지만 div가 왼쪽으로 떠 있기 때문에 이런 결과가 나타난 것입니다. 즉, section 안의 텍스트가 div 주위에 떠 있고 section이 전체를 감싸고 있습니다. section을 실제로 떠 있는 엘리먼트 다음에 나타나게 하려면 어떻게 해야 할까요?

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

마치 떠 있는 것만 같아요!

</div>
<section class="after-box">

clear를 이용해 이제 이 섹션을 떠 있는 div 아래로 옮겼습니다. 여기서는 left 값을 지정해 왼쪽에 떠 있는 엘리먼트들을 비웠습니다. 게다가 오른쪽(right)과 양쪽(both)도 비울 수 있습니다.

</section>

  • Creative Commons License