Mastering CSS Float Property for Modern Layouts

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: ➡️ View Code Demo As you can see, the element is taken out of the normal flow of the webpage, and it is now floating on top of the element. In this example, we are making the box float to the left side. Similarly, you can make it float to the right side like this: div { float: right; /* . . . */ } You can also float multiple boxes together like this: ➡️ View Code Demo Clearing float Notice that when the boxes are floating, all subsequent 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. ➡️ View Code Demo The clear property takes four values: none (default) left right 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 boxes are still floating next to each other, but the 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 CSS Grid Layout Guide Flexbox Complete Tutorial Modern CSS Colors If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

Mar 28, 2025 - 19:21

Mastering CSS Float Property for Modern Layouts

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:

➡️ View Code Demo

As you can see, the

element is taken out of the normal flow of the webpage, and it is now floating on top of the

element.

In this example, we are making the

box float to the left side. Similarly, you can make it float to the right side like this:

div {
  float: right;
  /* . . . */
}

You can also float multiple boxes together like this:

➡️ View Code Demo

Clearing float

Notice that when the

boxes are floating, all subsequent

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.

➡️ View Code Demo

The clear property takes four values:

none (default)
left
right
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

boxes are still floating next to each other, but the

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.

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