개체 속에서 텍스트가 어느쪽으로 유동하는가(흐르는가)를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 테이블 레이아웃이 고정(fixed)되는가를 나타내는 문자열이다.

none 디폴트이며, 유동하지 않고 텍스트가 있는 자리에 디스플레이된다.
left 텍스트가 개체의 왼쪽 끝으로 유동한다.
right 텍스트가 개체의 오른쪽 끝으로 유동한다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 none이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

left나 right 값으로, 개체가 블럭 개체로 취급되고, display 속성은 무시된다. 유동 문단은 문서에서 서로 접해 나타나게 한다.

유동개체 다음에 오는 개체는 유동개체에 상대적으로 그 부분만큼 이동한다.

유동개체는 다른 블럭 개체의 테두리, 패딩 혹은 마진에 닿을 때까지 좌츠으로나 우측으로 유동한다.

div와 span 개체들은 유동하여 표현되기 위하여 float 애트리뷰트를 설정하야 한다. IE5에서는 div과 span 개체들은 디폴트로 width을 할당하며, 값이 지정되지 않아도 표현된다.

적용
개체scriptCSS IE 버전
참조

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


유동하지 않는 문자열
<DIV id="container" style="border:solid 1 blue;padding:10">
<IMG src="../../gif/rfexample.gif" style="float:left">
<IMG src="../../gif/rfexample.gif" style="float:right">
<IMG src="../../gif/rfstyle.gif" style="float:left">
<IMG src="../../gif/rfstyle.gif" style="float:right">
<DIV style="float:none">유동하지 않는 문자열</DIV>
</DIV>
<SCRIPT>
coll=container.all;
str='';
for (i=0;i< coll.length;i++){
  str+=i+'] '+coll[i].nodeName+', styleFload=<FONT color=blue>'+coll[i].style.styleFloat+'</FONT>, '+coll[i].src+'<BR>';
}
document.write(str);
</SCRIPT>

이미지 위를 클릭해 보라.

삼항식으로 styleFloat 스타일속성을 지정하였다.

<IMG src="../../gif/rfexample.gif" style="float:right"
  onclick="(this.style.styleFloat=='right')?this.style.styleFloat='left':this.style.styleFloat='right'">
<IMG src="../../gif/rfexplain.gif" style="float:right"
  onclick="(this.style.styleFloat=='right')?this.style.styleFloat='left':this.style.styleFloat='right'">
<IMG src="../../gif/rfstyle.gif" style="float:left"
  onclick="(this.style.styleFloat=='right')?this.style.styleFloat='left':this.style.styleFloat='right'">
<IMG src="../../gif/rfproperty.gif" style="float:left"
  onclick="(this.style.styleFloat=='right')?this.style.styleFloat='left':this.style.styleFloat='right'">
이미지 위를 클릭해 보라.