CSS float

The CSS float property is used to define where the element should float. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .one{float: left;}
      .two{float: right;}
   </style>
</head>
<body>

   <div class="one">float: left</div>
   <div class="two">float: right</div>

</body>
</html>
Output
float: left
float: right

Note - If the position: absolute is defined to an element, then float property will not be applied to it. Or simply we can say that the float property has no effect on an absolutely positioned element.

CSS float Syntax

The syntax of float property in CSS, is:

float: x;

The value of x should be any of the following:

  • left - Used to float an element to the left in its container
  • right - Used to float an element to the right in its container
  • none - Used not to apply the float property at all. This is the default value
  • initial - Used to use the default value
  • inherit - Used to use the value inherited by the parent element

CSS float Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{float: left; background-color: purple; color: white; padding: 12px;}
      .b{float: right; background-color: purple; color: white; padding: 12px;}
      .c{float: none; background-color: green; color: white; padding: 12px;}
   </style>
</head>
<body>

   <div class="a">float: left</div>
   <div class="b">float: right</div>
   <div class="c">float: none</div>

</body>
</html>
Output
float: left
float: right
float: none

Note - Define clear property to an element that is available right after the element with float property defined to it, to avoid floating of element around it. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{float: left; background-color: purple; color: white; padding: 12px;}
      .b{background-color: green; color: white; padding: 12px;}

      .c{float: left; background-color: purple; color: white; padding: 12px;}
      .d{clear: left; background-color: green; color: white; padding: 12px;}
   </style>
</head>
<body>

   <div class="a">float: left</div>
   <div class="b">Without clear</div>

   <br/>

   <div class="c">float: left</div>
   <div class="d">With clear: left</div>

</body>
</html>
Output
float: left
Without clear

float: left
With clear: left

Let me create one more example on the same concept as of above example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{float: right; background-color: purple; color: white; padding: 12px;}
      .b{background-color: green; color: white; padding: 12px;}

      .c{float: right; background-color: purple; color: white; padding: 12px;}
      .d{clear: right; background-color: green; color: white; padding: 12px;}
   </style>
</head>
<body>

   <div class="a">float: right</div>
   <div class="b">Without clear</div>

   <br/>

   <div class="c">float: right</div>
   <div class="d">With clear: right</div>

</body>
</html>
Output
float: right
Without clear

float: right
With clear: right

CSS Online Test


« Previous Tutorial Next Tutorial »