CSS Floats are 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 clarify in order to create layouts before flexbox and grid, but float can still be used for modern applications.

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.

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 image getting as close as possible on all sides.

We could also float to the right instead.

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 order 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.

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.

We can set a float to none in order to stop the text from floating around an element but we can also use the clear property to prevent the text from flowing around the image as well. Let's use the following example to explain.

<div>
  <img src="url" class="img1" />
  <img src="url" class="img2" />
  <p>Text</p>
</div>
.img1 {
  float: left;
}
.img2 {
  float: right;
}

Let’s say that we want the text to only wrap around the left side image and not the right. We could just set the text to have a clear of right.

p {
  clear: right;
}

As you can see above the text no longer flows around the right image and instead starts below it. We could do the same for the left as well.

p {
  clear: left;
}

Now the text shows up below both the images since it has to start below the left image and the left image is taller than the right image.

If you have ever dealt with old float-based layouts then you are familiar with clearfix. Essentially all a clearfix does is fix the overflow issues caused by floating elements.

<div>
  <img src="url" />
  <p>Text</p>
</div>
img {
  float: left;
}
div {
  border: 1px solid red;
}

In the above example we have the same HTML/CSS from the start of this article, but I added a border to the div that wraps the elements. This helps show that the image is overflowing the div since floats cause an element to leave the document flow, thus opening us up to overflow issues.

Luckily, this is very easy to fix with a clearfix.

<div>
  <img src="url" />
  <p>Text</p>
</div>
img {
  float: left;
}
div {
  border: 1px solid red;
}
div::after {
  content: '';
  display: block;
  clear: both;
}

By adding a simple after pseudo-element to the div we have now fixed this overflow issue. The reason this works is that when you clear an element (in our case the after element) it must show up after the floated elements (because it is a display block). This means the after element shows up directly after the floated elements which expand div to the full height of the floated content. Also, since the after element is an element with no height/width it doesn’t actually take up any space on the screen and is thus invisible.

Float-based layouts may be a thing of the past, but using floats to wrap text around images is still very popular today. As long as you understand how floats and clearfixes work it is incredibly easy to make these types of layouts.