CSS Float

Last Updated : 7 Aug 2026

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 the CSS Float Property Works

The float property positions an element to the left or right of its containing element. After an element is floated, the surrounding inline content and other elements flow around it until the available horizontal space is occupied.

Some important points about the float property are:

Elements can be floated only to the left or right.
A floated element moves as far left or right as possible within its container.
Following elements wrap around the floated element unless the clear property is used.
Elements that appear before the floated element are not affected.
The float property is commonly used with images, navigation menus, and simple page layouts.

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"/> 
<p>
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>

Floating an Element to the Left

The float: left value places an element on the left side of its container. The surrounding content flows around the right side of the floated element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: left;
    margin-right: 15px;
}
</style>
</head>
<body>

<img src="image.jpg" alt="Sample Image" width="120">

<p>
This paragraph wraps around the image because the image is floated to the left.
The text automatically occupies the remaining horizontal space beside the image.
</p>

</body>
</html>

Explanation

In this example:

The image is positioned on the left side of the page.
The paragraph wraps around the image from the right.
The margin-right property creates space between the image and the text.

Clearing Floated Elements

When an element is floated, the following elements may also wrap around it. The clear property is used to prevent this behavior.

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: left;
    margin-right: 15px;
}

.clear {
    clear: left;
}
</style>
</head>
<body>

<img src="image.jpg" alt="Sample Image" width="120">

<p>
This paragraph wraps around the image.
</p>

<p class="clear">
This paragraph starts below the floated image because of the clear property.
</p>

</body>
</html>

Explanation

The first paragraph flows beside the image. The second paragraph uses clear: left, so it is displayed below the floated image instead of wrapping around it.

Creating a Simple Two-Column Layout using float Property

The float property can also be used to create simple page layouts by placing elements beside each other.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.left {
    float: left;
    width: 50%;
    background-color: lightblue;
}

.right {
    float: right;
    width: 50%;
    background-color: lightgray;
}
</style>
</head>
<body>

<div class="left">
    Left Column
</div>

<div class="right">
    Right Column
</div>

</body>
</html>

Explanation

In this example:

The first <div> is floated to the left.
The second <div> is floated to the right.
Each element occupies 50% of the available width, creating a simple two-column layout.

Next TopicCSS Font

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.