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.
An image element styled with right float.
<div>
<img src="/img/css/the-bedroom-sm.jpg"
style="float: right;" />
</div>
The float property positions an element relative to its container.
It accepts any of these values:
left - floats to the leftright- floats to the rightnone - default, does not floatinherit - inherits the float value of the parent
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>
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>
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 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 sidesleft - floating elements not allowed on the left sideright- floating elements not allowed on the right sideboth - floating elements not allowed on either the left or the right sideinherit - inherits the clear value of its parentAfter 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.
<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.
<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>
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. |
