clear:both
■ css에서 float 속성은 요소를 문서 위에 떠 있게 하는 역할을 하는데요. 그런데 이 속성을 한 번 지정하면 다음에 오는 요소들에도 계속해서 영향을 미치게 됩니다. 그렇기 때문에 이 속성을 해제해줘야 하는데 그 역할을 하는 게 clear 속성입니다. 혹시 float 속성에 대해서 좀 더 자세히 알아보실 분들은 아랫글 참고하시구요.
http://godvow.tistory.com/67 ◀◀ css float
여기서는 간단한 예제를 만들어보면서 'float'와 'clear' 속성을 적용해보겠습니다.
■ 이 예제에 float 속성을 넣어보겠습니다.
■ 위쪽에 위치한 검은색과 빨간색에 각각 float 속성값을 right와 left를 적용해봤습니다.
■ 그림처럼 각각 왼쪽과 오른쪽에 떠있게 되는데요. 노란색은 어디 갔을까요? 노란색은 빨간색 밑에 있습니다. 노란색에는 float 속성을 적용하지도 않았는데....이렇게 영향을 받게 되는 것입니다.
■ 이럴 때 노란색은 float 속성의 영향을 받지 않도록 clear:both; 속성을 넣어주면 되는데요. 속성값에는 'left'와 'right'를 따로 넣어줄 수 있지만, both(양쪽)을 넣어주면 float 속성값이 어느 쪽이건 관계없이 속성이 사라지게 됩니다. 예제에 적용해보겠습니다
■ float 영향 때문에 숨겨져서 안 보이는 노란색 배경에 [clear:both] 속성을 적용해봤습니다.
■ 앞의 float의 영향에서 벗어나서 원래 위치로 돌아오게 됩니다. 이렇게 해서 clear:both 속성에 대해서 알아봤습니다. 수고하셨어요.
