Float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left – The element floats to the left of its container
right – The element floats to the right of its container
none – The element does not float (will be displayed just where it occurs in the text). This is default
inherit – The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Syntax of float

float: none| left| right| initial| inherit;

Float Property Values:

Sr. NO Value Description
1 none The element does not float, (will be displayed just where it occurs in the text). This is default
2 left The element floats to the left of its container
3 right The element floats the right of its container
4 initial Sets this property to its default value
5 inherit Inherits this property from its parent element

Given Below is an Example

See the Pen CSS:FloatExample by Ankit (@AnkitPathshalaCoding) on CodePen.

Exercise 13.1

Float the photo
This webpage contains information on clouds plus a photo of clouds.
In the first step, float the photo to the left of the text, so that the text wraps around it.