Floats

Dimensions

• By default, a floated element shrink-wraps to the size of its content (the minimum width and height needed)

Width

• Floated elements should have a width defined, explicitly or implicitly (for cross-browser consistency)
• The child of a shrink-wrapped floated element must have an absolute width (explicit or implicit, not a %); otherwise, it creates a circular definition where the width of each is determined by the other, and the results will vary from browser to browser
  

Height

• Define a height for the parent of a floated element, otherwise the vertical spacing of the parent may be incorrect in IE

Spacing

Margins and padding

• For vertical spacing, use padding instead of margins for floated elements (and the elements they're floated against); margins are problematic for IE6/7
• Avoid using negative margins for floated elements (or the elements they're floated against); they're problematic in IE6/7

• When applying a horizontal margin to a floated div, if the first left-floated element has a left margin, or the first right-floated element has a right margin, use display:inline, otherwise the margin will be doubled in IE6
• For a floated element, the display property is ignored unless it has a value of none
• Floated elements are implicitly block-level

• A horizontal margin isn't always necessary for an element next to a floated element; it's only needed to prevent the content in the element from possibly wrapping around underneath the floated element

Layout

• For floated columns, either the width or height of the columns must be fixed (or else tables are needed)

• In a multi-column layout, a non-floated column next to a floated element must specify a margin >= the width of the floated element, to prevent the content from wrapping around the neighboring column.
• After the last column in a multi-column layout, a clear:both must be applied, to position subsequent content below any previous floated elements.

• Multi-column areas can be accomplished by floating elements or using display:inline
• A 2-column area can be safely accomplished by floating both div's to the left (optionally specifying the width for one or both); the second div will appear to the right
• Floating elements to the left and right in the same parent element may not be reliable; it's safer to float all elements to the left

• Can float an element below another by specifying clear for the second one and floating it in the same direction

• For a grid of floated elements, each element has to be set to the same height and width, and the specified  dimensions must be large enough to contain the content

2-column layout with footer

#left {float:left; width:200px;}
#main {margin-left:240px;}
#footer {clear:both;}

#left {float:left; width:200px;}
#main {float:left; padding-left:40px;}
#footer {clear:both;}

3-column layout with footer

#left {float:left; width:200px;}
#main {float:left; width:400px; padding-left:40px;}
#right {float:left; width:200px; padding-left:40px;}
#footer {clear:both;}

#left {float:left; width:200px;}
#right {float:right; width:200px;}
#main {margin-left:240px; margin-right:240px;}
#footer {clear:both;}

Containing floated elements

Clear

• Use a clear:both after one or more floated elements
• clear only applies to block elements
  

<div style="clear:both;"></div>     <!-- Has a height of 0 in FF, IE6, IE7, Safari, ... -->

• clear does not break the floating of ancestors; it only affects the floating of earlier siblings and their descendants (FF, IE6/7, Safari, Chrome, ...)
• If clear is used for a floated element which in turn has an uncleared floated child,  both floats are cleared (FF, IE6/7, Safari, Chrome, ...)

clearfix

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}

Float within a float

• Nesting floated elements is problematic and requires careful cross-browser testing
• The following combinations work as expected (FF, IE6/7, Safari, Chrome, ...):
  

Misc

• Avoid putting HTML comments (especially two or more) between floated elements, as it can cause problems in IE; HTML comments within a floated element are fine