Float, clear 속성
기호 설명
A | B: A 또는 B 중의 하나이다.
float: left | right | none
float 속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 된다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 none이다.
clear: none | left | right | both
지정한 방향에는 떠다니는 box가 자리할 수 없음을 나타낸다. 즉, clear의 값을 both로 하면, 해당 element box의 좌우에는 떠다니는 box가 올 수 없다. 따라서, 떠다니는 box의 다음 줄로 내려가게 된다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 none이다.
<HTML>
<HEAD>
<STYLE type="text/css">
IMG { float: left }
HR.clear { clear: both }
</STYLE>
<BODY>
<IMG src = "leaves.gif">예쁜 나뭇잎들입니다. 가을 같지요?
HTML에서는 이렇게 그림 다음에 글자를 쓰면 그림 옆에 한 줄 나오고,
나머지는 그림 아래로 내려가 버려요.
가로선도 이 글자들 아래, 그림 옆에 나오지요.
clear 속성을 쓴 가로선은 그림 아래로 내려가구요.
<HR>
<HR class=clear>
<BODY>
</HTML>