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