Style cssFloat attribute

Definition and usage

cssFloat Sets or returns the horizontal alignment of the element.

Tip:The CSS "float" property is called "cssFloat" in JavaScript because "float" is a reserved word in JavaScript.

Note:If there is not enough space for a floating element in a line, it will jump to the next line with enough space.

See also:

CSS Tutorial:CSS Floating

Example

Example 1

When you click the two buttons, let the image float to the left/right of the text:

function floatRight() {
  document.getElementById("myImg").style.cssFloat = "right";
}
function floatLeft() {
  document.getElementById("myImg").style.cssFloat = "left";
}

Try it yourself

Example 2

Change the cssFloat attribute of the DIV element:

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

Try it yourself

Syntax

Return cssFloat attribute:

object.style.cssFloat

Set cssFloat attribute:

object.style.cssFloat = "left|right|none|initial|inherit"

Attribute value

Value Description
none The object/element does not float. Default.
left The object/element will float to the left in the parent element.
right The object/element will float to the right in the parent element.
initial Set this attribute to its default value. See initial.
inherit This attribute is inherited from its parent element. See inherit.

Technical details

Default value: None
Return value: A string representing the horizontal alignment of the element.
DOM Version: DOM Level 2

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support