Floating and Clearing in CSS

Tweet

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.

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.

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>

floating-clearing_floated-box

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.

floating-clearing_cleared-box

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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments