CSS: One Property at a Time—Float

It’s not for layout anymore.

Photo by Pineapple Supply Co. on Unsplash

The float property was essential in allowing us to break away from bloated tables-based layouts. It was not intended to be used as a means for creating layouts, and those float-based layouts tended to be very brittle. If there was more copy in a box than it was designed for, your layout broke. If the viewport was too narrow and you didn’t have a fixed width, your layout broke. On the other hand, float-based layouts were still more reliable than using a combination of relative and absolutely positioned layouts.

Fortunately, we now have reliable layout tools in flex and grid, and float can go back to doing what it was intended to do; place an object next to content and have that content flow around it.

The float property can be set to left, right, none, or inherit. There are some newer values that are not fully supported, so I won’t be covering those here.

Here is some markup. I used a div as the floated object, but this could just as easily be an image.

<div class="card">
    <div class="image"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptas eum sed dolores perspiciatis beatae esse dicta debitis consequuntur repudiandae quod itaque nam tenetur, ea consequatur veniam quaerat amet quis
    </p>
</div>

Now I can set float:left; on the div with the class name image to have it set to the left of the copy and have the copy flow around it.

.image {
    background: hsla(220, 50%, 50%, .33);
    min-width: 5rem;
    min-height: 5rem;
    float: left; /* Float to the left */
    margin: 0 1rem 1rem 0;
}

See it for yourself:

Floats

Notes about float

Floated elements are removed from the normal flow of the page but still retain their place in the flow. This means that if a container only has a floated element, or the floated element has more height than non-floated elements, the containing block will collapse to only encompass the content and the floated element will overflow the area of the containing block. You can resolve this by adding an element at the end of the container with a clear declaration of left, right, or both (both is most commonly used).

See how it works:

Float Issues

Alternatively, you can use pseudo elements applied to the container that will fulfill the same function as the clearing div without adding extra markup to your document. This technique is called the “clearfix”.

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

CSS-Tricks has a great summary of the “clearfix” technique if you would like to learn more.

Also, setting float on an element within a flex or grid container has no effect. This makes sense when you consider that both of these settings on a container is defining the layout behavior and floated elements are part of the normal flow.

Conclusion

That just about covers floats. Don’t be afraid to use them when your design calls for them.