Float

In the old days of web development, when there were no flexbox and grid properties for creating layouts, the float property was widely used. The reason float became so common was because block-level elements are aligned in columns by default, and float was the easiest way to change their positions. Nowadays, we have other tools to create layouts, but float is still useful in certain situations.

In this topic, you will learn how to use the float property and when it should be used.

What is float used for?

The float property is commonly used when we want a block of text to flow around an image or want an element to stand next to another element. Some web developers even use it to create layouts, but properties like CSS flexbox can do this more efficiently.

With the float property defined, an element can be pushed to the left or right, thus allowing the next element on the webpage (or the next element in the flow) to float around it. Float is useful in these situations because no other CSS property can achieve the same result.

To work with float, we first need a container. In other words, the element we want to float needs to be contained within a parent element. Neither the element we want to float nor its parent element can have their position set to absolute because elements with this setting are removed from the flow of the webpage.

The values we can use with the float property are as follows:

• left: The element will float to the left side of its parent.

• right: The element will float to the right side of its parent.

• inherit: The element will inherit the float value from its parent.

Normal flow

First, let's look at an example where the float property could be used:

<div class="main-container">
    <img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582747_1280.png" alt="CSS Logo">
    <p>The float CSS property places an element on the left or right side of its container...</p>      
</div>

Notice that without float applied, the text is below the image. This occurs because the two elements are in the webpage's normal flow and are positioned in a column by default.

Float: left and right

When we want a block of text to wrap around an image, we can achieve this result using the float property. If we want our text to be on the right side of our image, we have to change the flow of the img element.

We can achieve this with the following CSS code:

img {
  float: left;
}

Applying the float property to our image hasn't changed its position, but it has changed the page's flow. The text now starts right at the top of the container, filling the empty space that was there before.

If we now use float: right , the image goes to the right side of its container, and the text flows around it on the left side.

img {
  float: right;
}

Other float effects

What will happen if we use float in both elements? Let's take a look:

img, p {
  float: left;
}

As you can see, the container has collapsed. This occurred because if a container only has floating elements inside, its height will have a value of 0px , and it won't expand.

If we just apply float to our text, nothing will happen because we only have two elements inside the container, and our text is the last. Remember that when we define a float value in one element, the next element will be affected as well.

Conclusion

Float can be very useful in certain situations since no other CSS property can achieve the same effects. You can utilize it to make a block of text flow around an image or to position Block-level elements in line. It's important to limit your use of float to circumstances where it is genuinely needed, though. Using float for other purposes may not deliver the required result, so it's better to take advantage of a different property if it can produce the effect you desire.

Remember that you need a container to use the float property and that doing so will change the normal flow of your webpage. With that in mind, let's practice with some exercises.