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

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


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

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


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


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