CSS Property float








float defines the direction in which an element is floated.

Summary

ItemValue
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
leftshifted so that the left edge hits the left edge of the containing block or the right edge of another floating block.
rightshifted 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>

Click to view the demo

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>

Click to view the demo