CSS Property float
float defines the direction in which an element is floated.
Summary
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.cssFloat="left" |
| Applies to | All elements. |
CSS Syntax
float: left | right | none | inherit;
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| left | shifted so that the left edge hits the left edge of the containing block or the right edge of another floating block. |
| right | shifted so that the right edge hits the right edge of the containing block or the left edge of another floating block. |
| none | not floated. Default value |
| inherit | Inherit the float property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
float |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use float CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
.myStyle {<!-- ww w. ja v a 2 s . co m-->
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 15%;
}
</style>
</head>
<body>
<div class="myStyle">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>
</html>Example 2
With CSS floating position, an element can be pushed to the left or right. Elements can only float horizontally, not vertically.
The following code makes an image float to the right of a paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
img {<!-- www. j a v a 2s .c o m-->
float:right;
}
</style>
</head>
<body>
<p>
<img src="http://java2s.com/style/download.png" width="90" height="80" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>