CSS Floats Are Still Useful

A short explanation on how CSS floats are still useful

When you think of CSS floats you probably immediately think of old and out of date CSS layouts. This is technically correct since many sites used floats and clearfixes in order to create layouts before flexbox and grid, but float can still be used for modern applications.

How Floats Work

Since floats have a bad reputation for being abused in layouts many people don’t learn floats. This leads to a lot of confusion around how floats work and most developers just don’t use floats to avoid this confusion. Floats are really useful, though, when it comes to flowing content around another piece of content. The most common use case is flowing text around an image.

Dummy Image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit in libero odit, dignissimos corrupti dolore voluptatibus praesentium sapiente corporis nam aspernatur consequuntur reprehenderit dolorem voluptate! Soluta, perferendis nam quibusdam sunt culpa eius id voluptate iste dolor eaque odio, recusandae velit nemo corrupti reprehenderit? Ex deleniti deserunt fugiat velit repellat corporis. Ex deleniti deserunt fugiat velit repellat corporis.

The above layout is incredibly easy to achieve with floats, but very difficult without. Here is a simplified version of the HTML/CSS for the above code.

<div>
  <img src="url" />
  <p>Text</p>
</div>

img {
  float: left;
}

This code is telling our img to float to the left side of the page. This means it leaves the normal document flow and moves to the left of all other content. Then the remaining content will flow around the img getting as close as possible on all sides.

We could also float to the right instead.

Dummy Image

img {
  float: right;
}

You will notice that even though the image is declared first in the HTML it still shows up after the text on the right. This is because floats break out of the normal document flow and ignore HTML ordering to force the floated element to be as far left or right as possible. It is important to note, though, that elements will only wrap around floated elements if they appear after the floated element in the HTML. If the img is defined after the p then the p will not flow around the floated img.

If we wanted to have no float we could do that by setting the float to none which is the default value for float.

Dummy Image

img {
  float: none;
}

As you can see this makes the text show up below the image. This is because the image is not floated so the text cannot wrap around it.

#css #web-development #programming #developer

How Floats Work

blog.webdevsimplified.com

CSS Floats Are Still Useful