Grow your CSS skills. Land your dream job.

float

Last updated on:

The float property is used for positioning and layout on web pages. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn't even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar.

In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not.

Setting the float on an element with CSS happens like this:

#sidebar {
   float: right;	
   width: 25%;		
}

There are four valid values for the float property. The values left and right float elements those directions respectively. The value none (default) tells the element not to float either direction and inherit which will assume the float value from that elements parent element.

Note: An element that is floated is automatically display: block;

What are floats used for?

Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.

Floats are also helpful for layout in smaller instances. Take for example this little area of a web page. If we use float for our little avatar image, when that image changes size the text in the box will reflow to accommodate:

This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. In doing it this way, the text would be unaffected by the avatar and not be able to reflow on a size change.

Clearing the float

Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration is more helpful than words:

In the above example, the sidebar is floated to the right and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns.

#footer {
   clear: both;			
}

Clear has four valid values as well. The value both is most commonly used, which clears floats coming from either direction. The values Left and Right can be used to only clear the float from one direction respectively. The value none (default), which is typically unnecessary unless explicitly removing a clear value that has been set. The value inherit would be the fifth, but is strangely not supported in Internet Explorer. Clearing only the left or right float, while less commonly seen in the wild, definitely has its uses.

The Great Collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.

As anti-intuitive as collapsing seems to be, the alternative is worse. Consider this scenario:

If the block element on top where to have automatically expanded to accomodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, us designers would be complaining much harder about this behavior than we do about collapsing.

Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.

Techniques for Clearing Floats

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.

  • The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn't hurt anybody.
  • The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
  • The Easy Clearing Method (otherwise known as "clearfix") uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
    .clearfix:after { 
       content: ""; 
       visibility: hidden; 
       display: block; 
       height: 0; 
       clear: both;
    }

    This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn't quite the whole story, as additional code needs to be used to accomodate for older browsers. Note: Also see this snippet which keeps track of the latest and greatest in clearfixes, including the newer "micro clearfix."

Different scenarios call for different float clearning methods. Take for example a grid of blocks, each of different types.

To better visually connect the similar blocks, we want to start a new row as we please, in this case when the color changes. We could use either the overflow or easy clearing method if each of the color groups had a parent element. Or, we use the empty div method in between each group. Three wrapping divs that didn't previously exist or three after divs that didn't previously exist. I'll let you decide which is better.

Problems with Floats

Floats often get beat on for being fragile. The majority of this fragility comes from IE 6 and the slew of float-related bugs it has. As more and more designers are dropping support for IE 6, you may not care, but for the folks that do care here is a quick rundown.

  • Pushdown is a symptom of an element inside a floated item being wider than the float itself (typically an image). Most browsers will render the image outside the float, but not have the part sticking out affect other layout. IE will expand the float to contain the image, often drastically affecting layout. A common example is an image sticking out of the main content push the sidebar down below.

    Quick fix: Make sure you don't have any images that do this, use overflow: hidden to cut off excess.

  • Double Margin Bug - Another thing to remember when dealing with IE 6 is that if you apply a margin in the same direction as the float, it will double the margin. Quick fix: set display: inline on the float, and don't worry it will remain a block-level element.
  • The 3px Jog is when text that is up next to a floated element is mysteriously kicked away by 3px like a weird forcefield around the float. Quick fix: set a width or height on the affected text.
  • In IE 7, the Bottom Margin Bug is when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix: using bottom padding on the parent instead.

Alternatives

If you need text wrapping around images, there really aren't any alternatives for float. Speaking of which, check out this rather clever technique for wrapping text around irregular shapes. But for page layout, there definitely are choices. Eric Sol right here on A List Apart has an article on Faux Absolute Positioning, which is a very interesting technique that in many ways combines the flexibility of floats with the strength of absolute positioning.

CSS3 tackles page layout a couple of ways:

Absolutely positioned floats (e.g. you absolutely position as normal, but the element is still able to affect other elements, like have text wrap around it) were discussed but I think it was shelved due to similarities to other more robust layout ideas.

Video

I did a screencast a while back explaining many of these float concepts.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Comments

  1. Giwon
    Permalink to comment#

    nice article, thanks a lot!

  2. Bala
    Permalink to comment#

    Dude thanks sooo much, really awesome article. It totally helped me visualize how float works. Im the kind of person who benefits from graphical presentation of technique more so then just boring texts.

    Thanks

    Bala

  3. marco
    Permalink to comment#

    Hi, just wondering about how to handle block elements that have a background-image or bottom-border for example – these design aspects do not wrap and are making my design life more difficult. I assume there is no solution – but I thought I would ask the master! Any thoughts on this float issue?

  4. neil
    Permalink to comment#

    Nice stuff. One other issue with floats I’ve encountered (similar to the 3px jog maybe?) is in trying to indent a paragraph alongside another – for instance, in laying out a theater or movie script, where you may want the speaker’s name on the left, and the actual speech to its right, and you hate using tables.

    Applying float: left to the speaker element and, say, margin-left: 70px to the following speech element results in progressive jogging of the speaker downwards with each successive line, at least in Chrome and IE. Irritatingly, this jog does not show up in the Visual Studio designer…

    Quick fix: set a margin-bottom: 0px; on both elements, and a clear:both on the speaker. The bad news: it will look fine in the browser and completely wrong in the VS designer (sigh)… :)

    <p style="float: left; clear: both; margin-bottom: 0px;">
        Portia:</p>
    <p style="margin-bottom: 0px; margin-left: 80px;">
        The quality of mercy is not strained. It droppeth as the gentle rain from heaven
        upon the place beneath. </p>
    <p style="float: left; clear:both;margin-bottom: 0px;">
        Richard III:</p>
    <p style="margin-bottom: 0px; margin-left: 80px;">
        A horse! A horse! My kingdom for a horse!</p>
    <p style="float: left; clear: both; margin-bottom: 0px;">
        Hamlet:</p>
    <p style="margin-bottom: 0px; margin-left: 80px;">
        To be or not to be. That is the question<br />
        Whether tis nobler in the mind to suffer<br />
        The slings and arrows of outrageous fortune</p>
    
  5. Diane
    Permalink to comment#

    I am wondering in the grid type layout where I want two rows of three boxes each is float left or inline-block a better option? Not ready to try a grid yet ;)

  6. Permalink to comment#

    Thank you for your most comprehensive CSS knowledge.
    I wish you the best!

    elmoluz

  7. Mark
    Permalink to comment#

    Float vs. Floating… Can a ‘float’ trick satisfy text wrap around something floating? Floating is where, as page scrolls up and down, something is always visible, floating in top right corner and stuff wraps around it? Compare here to another something floated or stuck top left corner of page… Note that since IE11 won’t float aside unless float is styled inline, we use tags div.aside)(aside to help style the float.

    Layout is simple.
    Element article ( relative hugs all content, fills page. Element section ( - wraps div.aside#left nicely, but gets buried under div.aside#right.

    Say we use two aside elements.
    Title block is div.aside#left and ad floater is div.aside#right.

    We code aside ( border:1px position:relative width:100px.

    Top left float is
    div.aside#left ( float:left margin-right:1em.

    Floater is
    div.aside#right ( position:absolute *ie6* position:fixed right:1em top:1em.

    Now, we need ‘ad aside’ always visible, top right corner of browser window! How can any variant of aside use float:right and not stick to top-of-page… and
    (visible top right corner as we scroll down) how can content wrap around our floater?

  8. I am having a problem keeping my facebook like/share button in the centre of my webpage.

    Can you help me with some css to stop it moving.

    My css is :
    .fb-like{position:fixed;padding:15px;margin:0 auto}

    Regards.
    Neil

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".