Floating and Clearing

A floated element is one whose float property has a value other than none. The element can be shifted to the left (using the value left) or to the right (using the value right); non-floated content will flow along the side opposite the specified float direction.1

The floated box is shifted to the left or right until its margin edge touches the padding edge of the containing block, or the margin edge of another floated element. If the floated element is within a line box, the top of the floated box is aligned with the top of the line box. If there isn’t enough horizontal room left for non-floated content to flow alongside the floated box on the current line, it’s shifted down until it fits, or there are no more floated elements.

Note: Defining the Margin Edge

The margin edge of a box surrounds the margin of the box. If the box has no margins, the margin edge is the same as the border edge. See The CSS Box Model for more information.

A floated box is taken out of the flow, so it doesn’t affect the block-level boxes around it. Line boxes located next to a floated box, however, are shortened to make room for the float. A containing block will not expand to accommodate a floating child box, unless the containing block is also floating, or has its overflow property set to something other than visible.2

Figure 1 shows a schematic view of the following HTML fragment, in which the image is floated to the left:

<p>
  <img src="image.png" alt="">
   text text … text text
</p>
<p>text text … text text</p>
Figure 1. A floated element An illustration of a floated img element. The img element sits atop two paragraph elements but the lines boxes within the paragraphs shorten to accommodate the img element.

A floated box can have margins like any normal box, but those margins will never collapse with the margins of adjacent boxes.

Negative margins on floated boxes behave slightly differently from negative margins on non-floated boxes. If the negative margin is on the same side as the float direction (for example, a negative left margin on a box that’s floated to the left), or the top or bottom of the box, the effect is to pull the box further in that direction. This enables the floated box to move outside the boundaries of its containing block, which means that this technique can be used to create an overlapping effect. Care must be taken, though, because the final appearance of elements floated in this way may differ between user agents.

If the negative margin is applied to the side that’s opposite the float direction (for example, a negative right margin is applied on a box that’s floated to the left), it moves the margin further inside the element itself (without changing the element’s width), which causes floated elements adjacent to the element to overlap its content. This approach can be used to create layout effects such as the multi-column layout documented on A List Apart.

Clearing Floated Elements

To force an element to start below any floated elements, we can use the clear property with a value of left, right, or both. An element whose clear property is set to left will start below all left-floated boxes in the same block formatting context, while a clear value of right will clear all right-floated boxes. If clear is set to both, the element will start below any floated box in that context. Figure 2 shows the example above, but this time, the second paragraph has a clear value of left.

Figure 2. A cleared element An illustration of a cleared p element. The img floats above a non-cleared p element, but not the cleared p element which is not drawn until after the bottom of the img element.

To achieve this clearing, we add space above the cleared element’s top margin until it’s clear of the affected floated boxes. As a result, we can’t use the top margin on the cleared element if we want a specific amount of space between it and the floated box. Space is added above the cleared element’s top margin until it’s free of the float, but that’s all. If we want to create space beneath the floated box, we must set the bottom margin of the floated element, or set top padding on the cleared element.

Internet Explorer for Windows will automatically clear all floated children of an element that has a layout, though this implementation disagrees with the CSS specification.

See The Internet Explorer hasLayout Property for more information about IE and layout.

Floating Versus Absolute Positioning for Multi-column Layouts

Floated boxes were intended to be used primarily for floating images so that text would flow around them. Nowadays, float is commonly used for the purpose of page layout; for example, floating the columns in a multi-column layout.

If the source order is the same as the presentational order, we can float each column to the left. In a narrow viewport, where there isn’t enough room for all columns to appear side by side, one or more columns on the right-hand side will drop below the others. Although this result may not be aesthetically pleasing, it has the advantage of avoiding a horizontal scroll bar.

Another advantage of floating columns is that it’s easy to achieve a full-width footer below the columns, regardless of which column is the longest. Using the clear property, we can make the footer drop below all floated columns.

Absolute positioning can also be used to lay out a page with columns, as it allows you to specify the exact position of the columns.

So what are the pros and cons of using floats instead of absolute positioning?

Firstly, a complicated float-based layout can be difficult and fragile in Internet Explorer. IE versions up to and including 6 have numerous float-related bugs.3

Floating an element will only shift it to the left or to the right—you can’t move an element up or down with the float property. Consequently, a float-based layout can become very tricky if you want to preserve a certain source order in your markup. There are ways to do this using a combination of negative margins and relative positioning,4 but if you use them, you’ll likely run into many nasty IE bugs.

Using absolute positioning incurs fewer browser compatibility problems, although IE and older versions of Opera (prior to version 9) use the wrong containing block in some cases. As long as you (and the browser) know your containing blocks, you can shift parts of the content around without being bound by the source order to the same extent that you are when working with floats.

Absolute positioning has its own complications, though. The main problem with this type of layout is that an absolutely positioned element is removed from the document flow, and doesn’t affect subsequent elements at all. A multi-column, absolutely positioned layout, in which any column can be the longest, makes it virtually impossible to display a footer at the bottom of the rendered document.

You can use the following checklist as a rough guide when deciding which type of layout to use for a multi-column document in which any column can be the longest:

  • If the source order is important, and it’s different from the presentational order, and you don’t need a footer on the document, use absolute positioning.
  • If you need a footer, use floats. Source order can be maintained with the help of negative margins and relative positioning, if necessary, albeit with a lot of extra work for IE—especially if the page width is variable.

A third option is to use the table-related values for the display property, but, unfortunately, lack of support by Internet Explorer hinders the use of those values for any general-audience site at this time.

Footnotes

1 Contrary to what some may think (or wish for), float does not support the value center.

2 In Internet Explorer 6 and prior versions, the overflow property does not cause the containing block to expand as described here.

3 See http://positioniseverything.net for well-documented workarounds.

4 For an example, see the A List Apart article at http://www.alistapart.com/articles/multicolumnlayouts

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#7
Contributed:
by thierry koblentz
Date:
Fri, 21 Mar 2008 14:46:13 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

I do not agree with the first comment about the "clearfix" method. The "clearfix" technique creates a "new block formatting context" in IE (via hasLayout), but not in modern browsers, hence creating layout/display differences.
See:
http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp
and
http://tjkdesign.com/articles/block-formatting_context/newBFC.asp

Also, this article suggests that [only] float and overflow (not set to visible) will make a containing block expand to contain a floating child, but the specs say:
"Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts".

See: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

ID:
#6
Contributed:
by epper
Date:
Tue, 29 Jan 2008 23:18:38 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

What about adding the "Simple clearing floats" method (overflow=auto|hidden|scroll + hasLayout) for clearing floats?

You've already spoken about it in the overflow property reference (http://reference.sitepoint.com/css/overflow).

I think that adding it here will give more completeness to this section ;)

ID:
#5
Contributed:
by pmmueller
Date:
Mon, 28 Jan 2008 20:40:34 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

===
Containing Floats

On this page, I expected a short summary of the various available methods of "Containing Floats", but maybe that topic is worth its own little page:

1. additional HTML-element with clear
2. Set a float to fix a float (Eric Meyer)
3. overflow:auto / overflow:hidden
4. Clearfix (as described in other comment)

Each with a short description of advantages and disadvantages.

===
More headings

I also would suggest to use (sub)headings in longer articles. They make an articles' structure more obvious, resulting in a more pleasant reading experience.

ID:
#1
Contributed:
by achtungbaby
Date:
Thu, 06 Dec 2007 06:51:44 GMT

A section on "Floats and Clearing" would not be complete without Tony Aslett's "clearfix" hack. Floats are indispensable to advanced CSS layout, but having to insert meaningless <br> tags to clear them used to drive me nuts. The clearfix solution requires no structural markup.

In a nutshell, the .clearfix class is added to any element containing floats that require clearing:

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

.clearfix { display: inline-block; }
.clearfix { display: block; }

http://positioniseverything.net/easyclearing.html

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products