Float

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float Property

The float property is utilized to position and format content, such as allowing an image to be aligned to the left of text within a container.

The float property can be assigned one of the following values:

• left – The element is floated to the left of its container.
• right – The element is floated to the right of its container.
• none – The element does not float and is displayed where it naturally occurs in the text. This is the default behavior.
• inherit – The element inherits the float value of its parent.

At its simplest, the float property allows text to wrap around images.

Example – float: right;

In the following example, an image is set to float to the right within a text.

Example

Example – float: left;

The subsequent example indicates that an image is set to float to the left within a text.

Example

Example – No float

In the example below, the image will be displayed inline with the text, without any floating effect (float: none;):

Example

Example – Float Next To Each Other

By default, div elements are displayed stacked vertically. However, applying float: left allows the elements to align horizontally beside each other.

Example