[표준코딩] clear:both 스타일 요소 알아보기

clear:both; 는 float 설정을 초기화 해주는 옵션입니다.

다음과 같이 나란히 두개의 영역이 나오게 <div> 태그에 float 속성을 주겠습니다.

1번

2번

<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="float: left">2번</DIV>

float속성에 left를 기입해 연속적으로 나타나게 합니다.

그렇다면 두번째 <div>에 clear:both  속성을 넣으면 어떻게 될까요?
속성을 부여받은 태그는 이전 태그의 float 속성을 말그대로 clear 해 줍니다.
그래서 위 예제에 적용하면 2번이 아래로 떨어지게 됩니다.

1번

2번

<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="clear:both; float: left">2번</DIV>

붉은 색으로 표시된 clear 속성을 삽입결과 2번 div 가 아래로 떨어지는 걸 보실 수 있습니다.


이 예제는 clear:both 에 대해 알아보기 위한 예제입니다. (실제 코딩에서는 약간 다르겠죠. ^^;;;)