Style cssFloat 屬性

Style 對象

cssFloat 屬性設定或傳回元素的水準對齊方式。

設定 cssFloat 屬性：

Object.style.cssFloat="left|right|none|inherit"

傳回 cssFloat 屬性：

Object.style.cssFloat

值

描述

left

對象/元素浮到父元素的左邊

right

對象/元素浮到父元素的右邊

none

預設。對象/元素不浮動。

inherit

cssFloat 屬性的值從父元素繼承。

所有主要浏覽器都支援 cssFloat 屬性。

<b>注意：</b>IE7 及更早的版本不支援 "inherit" 值。IE8 隻有規定了 !DOCTYPE 才支援 "inherit"。IE9 支援 "inherit"。

<b>注釋：</b>如果在一行中對于浮動元素而言空間太少，則這個元素會跳到下一行，這個過程會持續到有足夠空間的一行為止。

點選兩個按鈕設定圖像浮動到文本的左右邊：

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;title&gt;菜鳥教程(runoob.com)&lt;/title&gt;

&lt;script&gt;

function floatRight(){

    document.getElementById("img1").style.cssFloat="right";

}

function floatLeft(){

    document.getElementById("img1").style.cssFloat="left";

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;img loading="lazy" id="img1" src="w3javascript.gif" width="100" height="132"&gt;

&lt;p&gt;這是一個段落。&lt;/p&gt;

&lt;p&gt;這也是一個段落。&lt;/p&gt;

&lt;input type="button" onclick="floatRight()" value="右浮動"&gt;

&lt;input type="button" onclick="floatLeft()" value="左浮動"&gt;

&lt;/body&gt;

&lt;/html&gt;