CSS Floats
As discussed earlier, normal flow rules cause block boxes to stack vertically and occupy the client width of their container. This default behavior can be altered by applying the CSS float property. Floats can be applied to any HTML element but it should be noted that floating an inline box turns it into a block. Float has two values:left and right. When you specify the float property you must also indicate the width of the box. Failing this the floated box will continue to occupy the client width of its container. The only exception is for floated images since images have an intrinsic width. It is nevertheless advisable to specify the float property for images since it yields end results that are more predictable and scalable (if you use em widths).
A floated box moves to the left/right border of its container. If another box is already present adjacent to that border the newly floated box will stack immediately next to its right/left margin. Floated boxes will continue to stack in this manner until there is insufficient space at which point the stacking process will restart from the appropriate border of the container box.
An associated CSS property is clear:left|right|both|none. Clear forces stacking to restart as would otherwise have done owing to a lack of space to float another box in the same row. It is sometimes convenient to think of a clear assignment as the equivalent of using an HTML <br> tag. Indeed, there are times when the IE fails to comply with a clear request in the absence of a <br>.
Although floated boxes are always blocks, unlike blocks the vertical margins of adjacent floated boxes do not collapse. Floated boxes can be nested to yield visually pleasing effects that would otherwise have required a complex tabular structure. Browser support for floats is still quite variable so you should test all your float code on all the major browsers. You should be especially aware of the way in which browsers handle a float whose contents demand a height greater than that of the container. In the absence of an overflow:... directive IE will increase the height of the container. Firefox and Opera, on the other hand, leave the container unchanged but let the floated box contents spill out, albeit not in the same way. We should mention that correct
solution from the point of view of standards is the latter - the floated box is taken out of normal flow and should therefore have no influence on normally flowed boxes.
Here are a few examples of CSS float in use:
