CSS

Types of Float Property and How to Use Float in CSS

CSS float property provides designers to control the position of elements in HTML web pages. Float property has the following values: Left, Right, None, and Initial.

What is Float Property in CSS?

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 a fixed position.

Values of Float Property in CSS

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

Float: Right Align

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

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
         float: right;
         }
      </style>
   </head>
   <body>
      <h3>Float right Property</h3>
      <p>
         <img src="cutedog.jpg" alt="cute dog" 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

Explanation

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

Read Also: How to Center Background Images in Div Tag With CSS

Float: Left Align

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

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
         float: left;
         }
      </style>
   </head>
   <body>
      <h3>Float left Property</h3>
      <p>
         <img src="cutedog.jpg" alt="cute dog" 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

Explanation

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

Float: None Align

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

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
         float: none;
         }
      </style>
   </head>
   <body>
      <h3>Float none Property</h3>
      <p><img src="cutedog.jpg" alt="cute dog" 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

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 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.

Recent Posts

5 Important Things To Know About WordPress Before You Use It

There is a reason big-name companies like CNN use WordPress. WordPress is a popular content…

3 years ago

How to Install MySQL on Your PC in 3 Easy Steps

In this tutorial, I'm going to show you how to install MySQL on your computer.…

5 years ago

Download and Install Turbo C++ for Windows 10 (Full Installation Guide)

Download Turbo C++ for windows 10 in just 7 Mb and run your first C++…

5 years ago

PHP .HTACCESS Redirects

We can redirect any webpage to any other or redirect the whole domain or website…

5 years ago

PHP Redirect Pages

There are lots of methods to redirect pages, like refresh-redirect from META tag, redirect from…

5 years ago

PHP Include & Required

Include files in PHP are used in appending various global or config files. We can…

5 years ago