CSS 레이아웃을 배웁시다
clear 프로퍼티는 float의 동작 방식을 제어하는 데 중요합니다. 아래의 두 예제를 비교해 봅시다.
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
마치 떠 있는 것만 같아요!
</div>
이 경우 section 엘리먼트는 실제로 div 다음에 있습니다. 하지만 div가 왼쪽으로 떠 있기 때문에 이런 결과가 나타난 것입니다. 즉, section 안의 텍스트가 div 주위에 떠 있고 section이 전체를 감싸고 있습니다. section을 실제로 떠 있는 엘리먼트 다음에 나타나게 하려면 어떻게 해야 할까요?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
마치 떠 있는 것만 같아요!
</div>
clear를 이용해 이제 이 섹션을 떠 있는 div 아래로 옮겼습니다. 여기서는 left 값을 지정해 왼쪽에 떠 있는 엘리먼트들을 비웠습니다. 게다가 오른쪽(right)과 양쪽(both)도 비울 수 있습니다.
