CSS Reference Property

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:

inline-image
Normal position of an image in the page flow: it is placed in line with the remaining inline content.

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:

floated-image
The effect of floating an inline image to the left: it is removed from its inline flow and remaining content wraps 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.

unfloated-figures
Each block-level figure element takes up the entire horizontal space.

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.

stacked-images
Each block-level figure element still takes up the entire horizontal space, even if it had a smaller width.

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;
}
                
floated-images
Floated figures are positioned next to each other; each one of them wraps around the one before it.

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:

float-layout
A two-column layout created by floating two containers next to each other on the page.

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!

collapsed-parent
A parent container (gray borders) collapsed to the height of its non-floated content. The floated element (pink box in the above example) does not contribute to the height of its parent anymore.

collapsed-parent-of-floats
The gray borders determine the borders of the container element. The pink boxes are the floated elements inside the container. Since the container contains nothing but floated elements, its height collapses to zero. (You can still see some empty space in the container, that is the space created by the padding 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.

float-overlapping-container
The floated element from the first container overlaps the second container below it. The floated element obscures the border of the second container.

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:

float-overlapping-container
The floated element from the first container overlaps the second container below it. The floated element obscures the border of the second container.

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.

cleared-container
The container of the floated element expands after clearing its floats to contain the floated element, preventing it from overlapping 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.

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.

Official Syntax

  • Syntax:

    float: left | right | none | inherit 
  • Initial: none
  • Applies To: all elements, but its effect depends on the element’s display and position properties (See notes section above)
  • Animatable: no

Notes

The CSS3, new float values have been introduced that currently have no browser support. The new CSS3 syntax for the float property is: [ left | right | top | bottom | start | end | none | <page-floats> ] && contour?

This entry will be updated as soon as the new values have better support and explanation in the specification.

Values

left
The element is floated to the left. Content flows on the right side of the element, starting at the top. Content flow around the box is subject to changes according to the value of the clear property. See the clear property entry for details.
right
Similar to left, except the element is floated to the right, and content flows on the left side of the element, starting at the top.
none
The element is not floated.
inherit
The element inherits its float value from its parent.

Notes

The above mentioned behavior of the left and right values works when the writing-mode is td. If the value of the writing-mode is any value other than that, then a value of left will float the element to the top and content flows on the bottom side of the element (also subject to the clear property); and the value of right will float the element to the bottom and content flows on the top side of the element (also subject to the clear property).

New float properties introduced in CSS Level 3 are not listed and explained here as they are still not supported in any browser. This entry will be updated with the new values once they are supported.

Examples

The following floats an image to the left, and clears the floats of its container so that it expands to contain the float, using the overflow technique.

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

.container {
    overflow: hidden;
}
                

The following floats two containers next to each other inside their parent container (similar to the two-column layout shown previously), and clears the floats inside the parent container using the micro clearfix hack.

<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%;
}
                

Live Demo

The following demo shows an image floated inside a container with text wrapping to its side. The container does not have its floats cleared. Try using one of the above techniques to clear the floats on the container and see how it changes its height.

View this demo on the Codrops Playground

The following demo shows how you can create a simple gallery with images and captions using floats. Try clearing the floats to see the main container for the images:

View this demo on the Codrops Playground

The following demo shows a simple two-column layout like the one we mentioned above, created by floating two containers next to each other.

View this demo on the Codrops Playground

Browser Support

The float property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by

Last updated February 2, 2016 at 2:48 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.