Good practice about Float, best for designers and developers.

Thursday, June 4, 2009 6:07
Posted in category CSS, Development, XHTML

What is ?Float??

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.

In web design, an image that is floated remains a part of the flow of a web page. That means that if it changes in size or if the elements around it change, the page will automatically adjust (reflow). This differs from page elements that are absolutely positioned. Absolutely positioned page elements are removed from the flow of a web page. Absolutely positioned page elements will not affect any other page elements, whether they touch each other or not.

What are floats used for?

Besides simple examples like floating an image within a block of text, 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:

These types of layouts can be handled using absolute positioning inside of relative positioning as well, but floats are a more flexible. Let?s say the size of that avatar image were to change. With floats, the box could re-flow to accommodate the bigger size, whereas an absolutely positioned layout would create problems:

Problems with Floats

Oh, where to begin. Floats are fragile. They are full of issues and cross-browser quirks. Perhaps most significant is the need to clear floats in some situations. There are a couple reasons floats need to be cleared. First I?ll show you some examples of why a float would need to be cleared, then we?ll cover how to go about clearing.

Clear the float to fix the height of the parent element.

Elements which contain floated elements do not calculate their height as you might expect. In fact, if the parent element contains only floated elements, browsers will render the height at zero.

If you clear the float before the closing tag of the parent element, you can fix this.

Clear the float to start a new row.

Lets say you have a grid of floated objects.

Then let?s say you want to create a break in that grid in order to start a new row. Because, you know, it just makes sense visually for whatever reason.

Clearing only the left or right.

The above two needs for clearing call for generic clearing, that is, clearing both the left and the right of the float. Because floats can be floated left or right, you can also clear either the left or right only. This can be useful when clearing both sides would be problematic to your layout.

If both sides were cleared in the above example, the second image would have been pushed down to where the text block ended.

Different techniques for clearing floats

As with everything in CSS, there are more ways than one to do this.

Applying clear exactly where you need it.

The clear CSS property does exactly what it says on the box. The problem lies in where and how to apply an element to the page with the correct clear property.

  • Apply clear: both; to the element directly after where you need the float cleared. Take the example near the top of a web page layout with a full-width header and footer and main content floated to the left with a sidebar floated to the right. In order to get that footer to show up in the right place, you MUST clear the float before it. In this simple example, you could simply apply clear: both; to the footer div itself.This technique is wonderful because it works and it adds no superfluous markup to your code. However, it breaks down in more dynamic sites sometimes. What if, for example, you ended up having to add a new page element above the footer but below the main content? You would need to remember to apply the clearing to this new element now instead of the footer. It is often easier to think in terms of where you need to clear the float instead of on which element you need to clear the float (and is easier to implement).
  • Clear the float with an empty page element. <div>?s do nicely because generally you don?t have any styling applied to generic div?s (like you might a <p> element) and they don?t have any other special page functionality (like a <br />). Where ever you want to clear the float just add a div like this: <div style=?clear: both;?></div>. I find looking at inline-styling unappealing so I choose to make a class for this style and apply a ?clear? class to that div instead, but that is just a personal aesthetic choice.

The empty div method HTML:

    ...part of floated element
</div>

<div class="clear"></div>

<p> ... ahhhh, now I'm clear </p>

CSS:

div.clear { clear: both; }

Overflow: auto; on the parent element

I can?t explain to you why (wish I could), but applying the CSS property overflow: auto; to the parent element will cause the height to be calculated properly. It will grow to enclose all the floated elements instead of collapsing. This can be very useful and it?s very clean, but it has some issues of course. The major one being there often isn?t a parent element it makes sense to use it on. Think of times where you would need to clear the float more than once within the same single parent, this isn?t going to help you there.

Another problem is that you may want or need to use that overflow property for other purposes. What if you want to hide the overflow on that particular div? You can?t. You?ll have to wrap the div in yet another div to accomplish that.

The clearfix hack (clearing with the :after pseduo-class)

Although aging, the positioniseverything article on using a pseduo-class to clear the float is still very functional. And pretty brilliant, if you ask me. To explain simply, it adds a bit of content after the element. This bit of content (a period or space, usually) does the clearing the float, but is hidden from view.

Here is the code, applied via a class to any element you need to do the clearing:

/* This needs to be first because FF3 is now supporting this */
.clearfix {display: inline-block;}

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    font-size: 0;
    visibility: hidden;
}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

The article has a warning claiming that the technique is getting old and refers to the overflow: auto; fix. I don?t share their sentiment that this technique is outdated. This is fundamentally different than the overflow fix. With the clearfix, you apply the clearing class to the element itself, not a parent element. This means you can still use it even where there isn?t a parent element that makes sense and apply it by thinking abut where the float needs to be cleared.

Updates: Thanks to John for pointing out that FF3 now supports inline-block, so that statement will need to go first in the CSS so it can get over-written by the :after pseudo-class. Thanks to Brent for pointing out the Perishable Press article suggesting using a space instead of a period and adding font-size: 0;.

Another float problem: Pushdown

I feel like this deserves special attention because of how often I am helping someone troubleshoot a problem they are having with ?pushdown?. Again looking back at the example at the top of this article with the Main Content area floated left and the Sidebar floated right. This is a common structure for many blogs.

Whether it?s fixed or fluid, both of these areas will have a set width. They way floats are supposed to behave, if an element within the main content area exceeds the width the the main content area (say, you inserted an image that was too large) it will simply extend beyond and overlap anything it needs to. The way IE 6 handles this, is much different. If an element within the main content area exceeds the bounds in IE 6, it will simply push the sidebar down below, completely borking your layout.

The solution? The best solutions is just not put anything inside the main content area that will spill over. For better protection, and it if it works with your layout otherwise (no set heights!), you could set the overflow to hidden to hide any spillover. Yet another solution would be to use absolute positioning to get the sidebar over on the right. Remember though, absolute positioning removes the element from the flow of the page ? just something to be aware of.

A List Apart just recently had an article on how to use ?faux? absolute positioning, which an interesting read and covers a new technique for layout that has a lot of the advantages of absolute positioning while retaining flow and fighting the frailty of floats.

Be Sociable, Share!
Father's Day Promo $40 OFF on ANY orrder
You can leave a response, or trackback from your own site.

Leave a Reply