Types of Float Property and How to Use Float in CSS

Sometimes we need to change the position of text or an image and place it to fix position on our web page. CSS provides the facility to place text or image at left or right as per our requirements.

The float property can change the position of text and image on the page.

Syntax:

.classname{
float:value;
}

Here the .classname points to the element which we want to place at fix position.
The value field of the float has values as below:

  • Left: place the element at the left of the container
  • Right: place the element at the right of the container
  • None: the element does not float
  • Initial: it is the default value for text and image

Example:

Suppose we have an image, and we want to place it in the right position.

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h3>Float right Property</h3>
<p>
<img src="cutedog
.jpg" alt="Pineapple" style="width:150px;height:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
</p>
</body>
</html>

Output:

float right property in css

Explanation:

  • First, we select the image tag.
  • Then we assign the float: right property.
  • It places an image on the right of the container.

Example:

Suppose we have an image, and we want to place it in the left position.

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h3>Float left Property</h3>
<p>
<img src="cutedog
.jpg" alt="Pineapple" style="width:150px;height:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
</p>
</body>
</html>

Output:

float left property in css

Explanation:

  • First, we select the image tag.
  • Then we assign the float: left property.
  • It places an image at the left of the container.

Example:

Suppose we have an image and we want to place it at the default position.

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h3>Float none Property</h3>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:150px;height:150px;">
Lorem ipsum doler sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</p>
</body>
</html>

Output:

float none property in css

Explanation:

  • First, we select the image tag.
  • Then we assign the float: none property.
  • It places an image at the default of the container.

Note: float: initial is the same as float: none property and gives the same output.

Conclusion

This is all about float property in CSS. We can use it to place text or image at left or right as per our requirements. It is useful when we have a group of images, and we want to place them on the specific side of the page.

I hope you found this post informative.

Thank you for reading 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *