float - HTML CSS CSS Property

HTML CSS examples for CSS Property:float

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. float

Description

The float CSS property sets whether a box should float to the left, right, or not at all.

The following table summarizes the float Property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


float:      left | right | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
leftfloat on the left side of its containing block.
right float to the right.
noneThe box is not floated. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element float property.

The example below shows the float property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS float property</title>
  <style type="text/css">
    p {<!--from   w w  w  . j  av  a  2  s  .c  o  m-->
      width: 150px;
      padding: 50px 0;
      text-align: center;
    }
    p.red {
      float: left;
      background: #ff0000;
    }
    p.green {
      float: right;
      background: #00ff00;
    }
    </style>
 </head>
 <body>
  <p class="red">Float Left</p>
  <p class="green">Float Right</p>
 </body>
</html>

Related Tutorials