CSS Float

The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other element to wrap around it. It is generally used with images and layouts.

To understand its purpose and origin, let's take a look to its print display. In the print display, image is set into the page such that text wraps around it as needed.

Its web layout is also just similar to print layout.

How it works

Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.

A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at extreme left or extreme right.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.

CSS Float Properties

Property	Description	Values
clear	The clear property is used to avoid elements after the floating elements which flow around it.	left, right, both, none, inherit
float	It specifies whether the box should float or not.	left, right, none, inherit

CSS Float Property Values

Value	Description
none	It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.
left	It is used to float the element to the left.
right	It is used to float the element to the right.
initial	It sets the property to its initial value.
inherit	It is used to inherit this property from its parent element.

CSS Float Property Example

Let's see a simple example to understand the CSS float property.

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style 
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning Friends"/> 
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

Test it Now

Next TopicCSS Font

← prev next →

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

Interview Questions

CSS Float

How it works

CSS Float Properties

CSS Float Property Values

CSS Float Property Example