Easy Tutorial
❮ Prop Style Borderwidth Met Win Open ❯

cssFloat Property


Definition and Usage

The cssFloat property sets or returns the horizontal alignment of an element.

Syntax

Set the cssFloat property:

Return the cssFloat property:

Value Description
left The object/element floats to the left of the parent element.
right The object/element floats to the right of the parent element.
none Default. The object/element does not float.
inherit The value of the cssFloat property is inherited from the parent element.

Browser Support

All major browsers support the cssFloat property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires !DOCTYPE to support "inherit". IE9 supports "inherit".


Tips and Notes

Note: If there is not enough space for the floating element in a line, the element will jump to the next line, and this process will continue until there is enough space.


Examples

Click the two buttons to set the image to float to the left or right of the text:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function floatRight(){
    document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
    document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>

<img decoding="async" loading="lazy" id="img1" src="w3javascript.gif" width="100" height="132">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="button" onclick="floatRight()" value="Float Right">
<input type="button" onclick="floatLeft()" value="Float Left">

</body>
</html>

❮ Prop Style Borderwidth Met Win Open ❯