Premium CSS Course

CSS Floats

The float property in CSS allows you to position elements to the left or right of their container, enabling content to flow around them. Floats are often used for creating layouts, such as multi-column designs or aligning images alongside text.

What is a Float?

When an element is floated, it is taken out of the normal document flow (but still affects surrounding content) and can be aligned to the left or right of its container. Other content will wrap around the floated element.

Basic Usage of Floats

The most common values used with the float property are left and right, which align the floated element to the left or right of the container, respectively.


        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

In the example above, elements with the class float-left will float to the left, while elements with the class float-right will float to the right.

Clearing Floats

After using floats, the container's height may collapse, as floated elements are taken out of the normal document flow. To fix this issue, you can use the clear property to clear floats and restore the normal flow.


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

The clearfix class adds a pseudo-element (::after) to the container, which clears any floated elements and forces the container to expand to fit them.

Creating Multi-Column Layouts with Floats

Floats are often used to create multi-column layouts. Here's how you can use floats to create two columns:


        .column {
            width: 45%;
            float: left;
            margin-right: 5%;
        }

        .column:last-child {
            margin-right: 0;
        }

In this example, two <div> elements with the class column will be floated next to each other, each taking up 45% of the container width, with a 5% margin between them.

Float on Images

Floats are often used to make text wrap around images. You can float an image to the left or right, and the text will automatically wrap around it.


        img {
            float: left;
            margin-right: 20px;
        }

This example will make the image float to the left of the content, with 20px of margin on the right to separate the text from the image.

Common Float Issues

While floats are powerful, they can cause layout issues such as collapsing containers or overlapping elements. These issues can usually be fixed with the clear property or by using the clearfix technique mentioned earlier.

Best Practices for Using Floats