CSS Float

The float property positions an element floating inside its container.

This property is used for positioning and formatting content.

A common use case is when text has to flow around an image.

Example

#

An image element styled with right float.

<div>
  <img src="/img/css/the-bedroom-sm.jpg"
       style="float: right;" />
</div>

Using float

#

The float property positions an element relative to its container.

It accepts any of these values:

  • left - floats to the left
  • right- floats to the right
  • none - default, does not float
  • inherit - inherits the float value of the parent

Float : right

This example shows an image with float:right.
The text fills the remaining area.

While he was in Arles, Van Gogh made this painting of his bedroom in the Yellow House. He prepared the room himself with simple furniture and with his own work on the wall. The bright colors were meant to express absolute ‘repose’ or ‘sleep’.
<style>
  .float-right {
    float: right;
    margin-left: 15px;
  }
</style>

<div>
  <img src="/img/css/the-bedroom-sm.jpg"
       class="float-right" />

  While he was in Arles, Van Gogh made
  this painting of his bedroom in the
  Yellow House. He prepared the room
  himself with simple furniture and with
  his own work on the wall. The bright
  colors were meant to express absolute
  ‘repose’ or ‘sleep’.
</div>

Float : left

This example shows an image with float:left.
The text fills the remaining area.

While he was in Arles, Van Gogh made this painting of his bedroom in the Yellow House. He prepared the room himself with simple furniture and with his own work on the wall. The bright colors were meant to express absolute ‘repose’ or ‘sleep’.
<style>
  .float-left {
    float: left;
    margin-right: 15px;
  }
</style>

<div>
  <img src="/img/css/the-bedroom-sm.jpg"
       class="float-left" />

  While he was in Arles, Van Gogh made 
  this painting of his bedroom in the 
  Yellow House. He prepared the room 
  himself with simple furniture and with 
  his own work on the wall. The bright 
  colors were meant to express absolute 
  ‘repose’ or ‘sleep’.
</div>

Float : none

This example shows an image with float:none. The image does not float and displays inline. Text does not flow around the image.

While he was in Arles, Van Gogh made this painting of his bedroom in the Yellow House. He prepared the room himself with simple furniture and with his own work on the wall. The bright colors were meant to express absolute ‘repose’ or ‘sleep’.
<style>
  .none {
    float: none;
  }
</style>

<div>
  <img src="/img/css/the-bedroom-sm.jpg"
       class="none" />

  While he was in Arles, Van Gogh made
  this painting of his bedroom in the
  Yellow House. He prepared the room
  himself with simple furniture and with
  his own work on the wall. The bright
  colors were meant to express absolute
  ‘repose’ or ‘sleep’.
</div>

The clear Property

The clear property brings the page flow back to normal following a floating element.

It defines what happens with elements next to a float element.

This property accepts any of the following values:

  • none - default, allows floating elements on both sides
  • left - floating elements not allowed on the left side
  • right- floating elements not allowed on the right side
  • both - floating elements not allowed on either the left or the right side
  • inherit - inherits the clear value of its parent

After the float property is used, it is common to use the clear property.

For example, for left floating elements, the left should be cleared, and vice versa.

A floated element without clear property.

Floating Element
This text follows a floated element. Since the float is not cleared this element continues to flow around the floated element.
<style>
  .floater {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    background-color: aliceblue;
  }

  .next-element {
    border: 3px solid #302ea3;
    padding: 15px;
  }
</style>

<div>
  <div class="floater">Floating Element</div>
</div>

<div class="next-element">
  This text follows a floated element. 
  Since the float is not cleared this 
  element continues to flow around 
  the floated element.
</div>

A floated element with clear property.

Floating Element
This text follows the floated element. Since the float is cleared this element displays below the floated element.
<style>
  .floater {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    background-color: aliceblue;
  }

  .cleared-element {
    border: 3px solid #302ea3;
    padding: 15px;
    clear: left;
  }
</style>

<div>
  <div class="floater">Floating Element</div>
</div>

<div class="cleared-element">
  This text follows the floated element. Since the float is cleared
  this element displays below the floated element.
</div>

Float Properties

These are the float properties.

Property Description
clear Specifies whether to continue float behavior for elements next to a floating element.
float Specifies how an element should be positioned inside a container.

You may also like

Guides