DEV Community

Cover image for Using the `float` Property in CSS
TheDevSpace
TheDevSpace

Posted on • Originally published at thedevspace.io

Using the `float` Property in CSS

#webdev #html #css #codenewbie

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Originally, the float property was used to take an HTML element (usually an image) out of the normal flow of the webpage and make it float on top of other elements. But then developers quickly realized you can use float to design entire webpage layouts, so that multiple columns of information could sit next to each other.

However, with the creation of modern layout techniques such as grid and flexbox, float gradually returned to its original purpose.

Float

Here is an example of using float:

Visit Code Demo 🔗

As you can see, the <div> element is taken out of the normal flow of the webpage, and it is now floating on top of the <p> element.

In this example, we are making the <div> box float to the left side. Similarly, you can make it float to the right side like this:

div {
  float: left;
  /* . . . */
}
Enter fullscreen mode Exit fullscreen mode

You can also float multiple boxes together like this:

Visit Code Demo 🔗

Clearing float

Notice that when the <div> boxes are floating, all subsequent <p> elements will move up to fill their original space. If you want to change this default behavior, meaning you don't want the floated boxes to affect the layout of other elements, you can clear the side effects of float using the clear property.

Visit Code Demo 🔗

The clear property takes four values: none (default), left, right, and both.

When set to left, the side effects of left floated boxes will be removed, as shown in the demonstration. As you can see, the two <div> boxes are still floating next to each other, but the <p> element is no longer affected.

When set to right, the side effects of right floated boxes will be removed, and when set to both, the side effects of all floated boxes will be removed.

Read More

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Top comments (0)

close