/

HTML / CSS / JavaScript Tutorial

CSS Property: float

[this page | pdf | back links]

The CSS (CSS1) float property indicates whether an element should float. If the element is absolutely positioned then the float property is ignored.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

left

Element floats to left

none

(default value). Element not floated (i.e. displays exactly where it occurs in text)

right

Element floats to right

 

Default Value:

none

JavaScript syntax:

e.g. object.style.cssFloat="right"

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
img.x1 {float: left;}
</style>
</head>
<body>

Element with default property:<br>
<img class="x1" src="Pictures/Shape1.jpg">
<p>Some text</p><br>
<p>Some more text</p>

Element with property set by HTML:<br>
<img class="x1" src="Pictures/Shape1.jpg">
<p>Some text</p><br>
<p style="clear: both;">Some more text</p>

Property set with JavaScript:<br>
<img id="x2" src="Pictures/Shape1.jpg">
<p>Some text</p><br>
<p id="x3">Some more text</p><br>

<script>
document.getElementById("x2").style.float = "left";
document.getElementById("x3").style.clear = "both";
</script>


</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFloat() {
  var x = document.createElement("DIV"); x.style.float = "left"; return (window.getComputedStyle(x, null).float == "left");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile