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> 이렇게 나와요

◀ ■ ▶