float

The float property is a positioning property used to change the position of an element in the natural flow of the page, and push it either to the left or to the right of its container.

The element remains in the natural flow of the page, but is pushed to either direction inside its container. The remaining content in the natural flow of the page will wrap around the floated element.

A floated element is one whose float property value is set to a value other than none. Content following a floated element will wrap on either side of the element, not on both sides—an element that is floated to the left has content wrap around its right side, and an element floated to the right has content wrap around its left side.

An element can be floated either to the right or to the left. It can also inherit its float value from its parent container. The default value is none. CSS Level 3 introduced new float values that currently have no browser support, and hence are not covered in this article.

Examples of floats are mostly seen in print designs, where images are placed on either side of the page or column, and text wraps the image on the other side. Some floats in print design are also floated in the middle, and with text wrapping on all four sides of the floated element. Floating text around images in all four directions is currently not possible in CSS, but future specifications will work on adding this feature to the web. Current CSS specifications define ways to float elements either to the left or to the right of their container, with content wrapping them on the other side.

Normally, content would not wrap around other content on a web page. For example, an image (<img>) would normally be positioned inside the line box with the text next to it, for example:

If you’re not familiar with positioning and display in CSS, you should check the position and display property entries for details.

If the image is floated to the left using the float property, it will be removed from its normal flow inside the line box, and text will wrap around it to the right:

You can do more with the float property than wrap text around images. You can create a gallery of images, with a caption for each image, by floating their containers next to each other. For example, an image with an associated caption is best marked up in HTML5 using the <figure> element. For a list of images that make up a simple gallery, you’d have a markup similar to the following:

<div class="gallery-container">
    <figure>
        <img src="my-image.png" alt="Alt text">
        <figcaption>
            image caption goes here
        </figcaption>
    </figure>
    <figure>
        <img src="my-image.png" alt="Alt text">
        <figcaption>
            image caption goes here
        </figcaption>
    </figure>
    <figure>
        <img src="my-image.png" alt="Alt text">
        <figcaption>
            image caption goes here
        </figcaption>
    </figure>
    <!-- more images go here ... -->
</div>
                

The <figure> element is a block-level element—it takes up all available horizontal space, and, normally, no content would wrap around it or sit next to it on the same line.

Even if you were to set a small width on the figures, they’d still be stacked on top of each other, instead of next to each other, because block-level elements take up all available horizontal space next to them.

By using the float property on each of the figures, they will be pushed to the left, for example, and then subsequent images will also be pushed next to them, instead of under them.

figure {
    float: left;
    /* set a margin to push the figures away from each other a bit */
    margin: 10px;
}
                

When a block-level element is floated, its width is calculated based on the width of the content inside it. In the case of the <figure> elements above, even when no width was specified on the figures, the figures shrunk to fit the content (and padding) inside them once they were floated using float: left.

With that said, it’s always best to explicitly specify a width on floated elements, unless it’s a replaced element—that is, an element that has intrinsic dimensions specified by the element itself and not by other elements on a page, like an image for example, or form elements such as buttons and/or input fields.
Specifying explicit width on floated elements makes sure the floats behave consistently in all browsers.

Before the float property was introduced, developers used tables to lay out elements on a page, even though tables are not a layout feature and were not meant to be used as one. For example, the above figures placed next to each other would be positioned like that by using a table and placing each individual image inside a table cell of its own (same for the image captions). Imagine how time-consuming and markup-bloating that would be!

Today, the float property can be used to create table-like layouts without using tables. It came as a perfect solution to the table layouts and has been used widely to lay out entire pages until today.

For example, by floating containers (which are block-level elements like the <figure> element above) next to each other, we can create columns of content on a web page, as shown in the following image:

By floating a container, specifying a width for it, and doing the same to other containers after it, we can stack up containers next to each other as shown in the image above to create multi-column layouts without having to resort to tables for that.

Of course, the float property isn’t meant to lay out entire page layouts—it’s meant to flow content around other content, mostly as is done in magazine designs. So, CSS Level 3 introduced more advanced and layout-specific features and properties which, once better supported, can replace floats to create entire page layouts. Some of the new layouts features in CSS3 are: Flexbox, Grid, and Multi-Columns.

Things You should know about the behavior of floats

There are certain rules that govern the behavior of a float in CSS. The following rules specified in the specification apply to floated elements:

• The outermost edge of a floated element—that is, the edge of the margin area if present, if not present, it’s the border edge of the element—cannot exceed the edge of its containing block. This applies to elements that are floated to the left and to elements that are floated to the right.
• A left-floated element must be put as far to the left as possible, a right-floated element as far to the right as possible.
• A floated element will be pushed to the left (or right) until its outermost edge touches the edge of its containing block or the edge of another floated element on the page.
• The right margin edge of a left-floating element may not be to the right of the left margin edge of any right-floating element that is to the right of it. Similar rules hold for right-floating elements.
• A floated element has to be placed as high as possible in the flow of the page. When text is wrapped around an image, for example, as we saw in a previous example, the text starts out at the top edge of the image and continues downwards till it flows normally below the image. The uppermost edge of a floated element cannot exceed the upper edge of its containing block.
• The top margin edge of a floating element may not be higher than the margin top of any block-level or floated element generated earlier in the source document.
• If the width of the floated element exceeds the width of the available space, it will be shifted down onto a new line.
• When an inline element such as an image is floated, it becomes a block-level element. That is, the value of the display property becomes block, even if the element’s display value is set otherwise.
• The margins of a floated element do not collapse with the margins of surrounding elements. For more information on collapsing margins, please refer to the margin property entry.
• The contents of floats are stacked as if floats generated new stacking contexts, except that any elements that actually create new stacking contexts take part in the float’s parent’s stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.
• The root (html) element cannot be floated.
• An absolutely positioned element cannot be floated.
• A floated element remains in the flow of the page—it is not removed from the page like an absolutely positioned element is. An absolutely positioned element is removed from the page flow completely and does not affect the flow of other elements on the page at all, while a floated element still does affect the flow of other elements around it.

In addition to the above behavior, one important thing to know about CSS floats is how they affect their parent containers.

When an element is floated, its container’s height collapses to fit the height of the remaining content on the page other than the floated element. This means that the floated element does not contribute to the height of its container anymore. So, if a container contained nothing but floated elements, its height will collapse to zero, as if no content were available inside it!

This phenomenon has a side effect: any content that comes after the collapsed container will be overlapped by the floated element (pink box in the above example). The borders of the second container are obscured by the floated element from the container that comes before it.

You may have also noticed that the float from the first container affects the flow of the content in the second container as well.

The collapsing of the parent may sometimes be not obvious at first, especially if you don’t have any borders and/or backgrounds set on the element. So, your element my collapse and you may have some weird layout issues if you don’t remember this and work against it.

In order to avoid this problem of collapsing containers and overlapping others with floats, we need to do what is called clearing the floats inside the container containing the floats. Floats are cleared after the floating element and before the end of its container.

There are several techniques for clearing floats. We’re going to mention all of them, and then recommend one that is the most used today by most web developers.

Techniques for Clearing Floats

Let’s go back to our last example with the pink boxes and their collapsed parent:

We need to clear the container of the floated element so that it expands to fit its height and prevent it from overlapping other content on the page. We can do that using either of the following techniques:

Using an empty element in the floats container

You can clear the container right before its end and after the floated elements by adding an extra element—usually an empty element, preferrably a <div>—and then using the clear property to, well, clear the floats of the container.

The clear property is used to clear the areas around floated elements to push other elements down in the flow of the page. For examples and more information, please refer to the clear property entry.

So, to clear the floats of the container and prevent it from collapsing if one of its elements is floated, you can add the following right before the end of the closing tag of the container:

<div style="clear:both;"></div>
                

Or, alternately, you could give the empty element as class name such as clearfix, and then applying the clear property to it in the CSS:

<div class="clearfix"></div>
                

.clearfix {
    clear: both;
}
                

Adding this to the parent container will make sure it expands to contain its floated elements, and avoids having the float overflow its container and overlap other elements on the page.

There is, however, one obvious problem with this technique: adding the extra non-semantic element to the markup. You would have to add the same empty <div> to every element that has floated content, adding extra non-semantic markup to the page. Adding presentational markup is frowned upon, not only is this against the principle of separating concerns, but it also produces non-semantic markup in the page, and may end up bloating your HTML.

In addition to the <div> element, you can use any other random element such as a <br />, and add the clearing styles to it either inline or via CSS.

Using the overflow property

This is one of the most popular ways to clear floats inside a container. Using the overflow property, you can clear the floats very simply by applying the property to the container and giving it either a auto value or a hidden value.

.floats-container {
    overflow: hidden;
    /* OR */
    overflow: auto;
}
                

That’s just it. Of course, this technique can have some side effects, too.

The purpose of the overflow property isn’t clearing floats in a container, even if it works for that. The overflow property is used to determine what to do regarding extra content inside an element—content that may overflow the element.

By using overflow: hidden; on an element, you’re also telling the browser to cut off any excess content that may overflow the edges of the element. For example, if you have an element with a fixed height, and the content inside it needs more room and hence a bigger height, the content would normally overflow the element. By setting overflow: hidden; you’ll cut off any excess content. Also, any content that may have deliberately positioned outside the boundaries of the container will also get cut off and be hidden. So, make sure that using this does not influence your layout in a way that you do not intend.

On the other hand, using overflow: auto;, the browser will add scrollbars to your element, even if it doesn’t need them. That’s why overflow: hidden; is more used, but, as mentioned before, make sure that using it does not affect other elements inside your container.

It is worth mentioning here that the overflow techniques does not work in IE6. Setting an explicit width to the container solves this issue in IE6. If you don’t want to, or can’t, set an explicit with, you can use the following snippet (targetting IE6 only) to make the overflow property work:

/* 
 * Source: http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/ 
 * IE6 fix     
*/
.container {
    height: 1%; 
    overflow: visible;
}
                

Floating the container itself

Another very simple and convenient way to clear the floats inside a container is by floating the container itself. This will automatically clear the floats inside it, and have it expand to contain its floated children.

.container {
    float: left; /* or right, whichever you prefer */
}
                

Of course, as with previous techniques, this technique may have unwanted effects on your layout, as you may not want your container to be floated, since floating it may affect how other elements are laid out on the page. So, again, only use this if it works with what you have and what you want.

Using the :after pseudo-element

This technique is the safest, and currently one of the most popular techniques used, and it is the one we recommend using, as it clears the floats without a need for additional presentation markup, or properties that may otherwise affect the layout in unwanted ways.

This technique uses the :after pseudo-element of the container to clear the floats. The :after pseudo-element is an element that is added to an element right after all other content inside it. So, practically, this works the same way the empty <div> technique works, but instead of adding an empty non-semantic element to the page, you’re using the pseudo-element generated for the container.

If you’re not familiar with pseudo-elements and how they work, please refer to the :after entry for details and examples.

Just like we used the clear property on the empty <div> before, we will use it on the :after pseudo-element. Extra styles need to be added, however, due to the nature of the pseudo-element and how it works.

.container:after {
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both;
}
                

And that clears the float inside the container and it expands to contain its floated elements.

This is the best of all techniques as it does not have any side effects. However, support for this technique isn’t very broad, as older browsers, older Internet Explorer in particular, don’t support the snippet above, so some extra code needs to be added to accommodate for those.

Many snippets have been created and used. The most common and most popular one today is one called The Micro-Clearfix Hack by Nicolas Gallagher. His micro hack is an update to the Clearfix Hack used before, that updates it further by reducing the amount of CSS needed, while also supporting old browsers, back to IE6. Known support is: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, and IE 6+.

The following is the code for the micro-clearfix hack, taken from Nicolas’ article linked earlier. The snippet looks much bigger than it is, only because it contains comments that explain what the code does.

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}
                

To use this technique, all you have to do is include this CSS in your style sheet, and then give a class of clearfix to any element whose floats you want to clear.

You can choose any of the above techniques for clearing your floats. Choosing one depends on what you’re trying to do and how it will affect your layout.

Clearing Floats The Standards Way

In CSS3, a new value for min-height is defined but is still not implemented in any browser. That value is the contain-floats value. When applied to the extent of a block element, the contain-floats value forces it to be large enough to contain the margin boxes of any floats that originate inside the block and that participate in the same block formatting context as the block’s immediate contents.

Until the new contain-floats value is implemented, using the Micro Clearfix Hack mentioned above is the popular way to clear floats.

Float problems you should know

The float property has certain bugs and quirks in Internet Explorer that you should know about. The behavior of floats may not be as you’d expect in Internet Explorer all the time. Several bugs have been found and there are many articles discussing these bugs in detail. Since these bugs are numerous, and discussing them would make this article too long to read, here is a list of resources that you can read to learn more about these bugs in greater detail. The list has been compiled by Louis Lazaris in this article he wrote for Smashing Magazine.

• The Internet Explorer Guillotine Bug
• The IE5/6 Doubled Float-Margin Bug
• IE7 Bottom Margin Bug
• The IE Escaping Floats Bug
• The IE6 Peekaboo Bug
• The IE6 “Ghost Text” Bug
• The IE6 Expanding Box Problem
• The IE6 3-pixel Gap

Trivia & Notes

The float property interacts with the display and position properties.

The float property has no effect on an element whose display is set to none. An element with display value none will be removed from the flow of the page and therefore won’t be affected by the value of the float property.

The float property has no effect on an absolutely positioned or fixed elements. When an element has its position set to either absolute or fixed, the value of the float property is computed as none.

An inline element (one with a display value of inline) becomes a block-level element when floated. That is, its display value is computed as block. Same applies to inline-block elements. An inline-table display value is computed as table.

.container img {
    float: left;
    /* add some margin to push content away from it */
    margin: 0 10px 10px 0;
}

.container {
    overflow: hidden;
}
                

<div class="container clearfix">
    <section class="left"><!-- some content here --></section>
    <aside class="right"><!-- some content here --></aside>
</div>
                

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.left {
    float: left;
    width: 68%;
    margin-right: 2%;
}

.right {
    float: right;
    width: 30%;
}