Delphinidin

- Floating Content
A simple explanation of the float property is that it is used to put content side-by-side. In the coming sections, you look in depth at the float property, its idiosyncrasies, and how you can use it to lay out a web page. The following code outlines the float property and its values.

{float: left | right | none;}
Initial value: none

At this point, the float property appears fairly simple. It accepts keyword values of left, right, and none. The effects of the float property are intrinsically tied to the CSS box model and specifically as described in the next section. After the float property is applied to an element, regardless of the type of element, that element takes on the behavior of a block element, where its dimensions are defined by width, height, padding, borders, and margins.

-- Floating Box Model
Because floated elements are repositioned to allow other content to flow around them, they exhibit
unique behavior. This behavior is outlined here:

+ The margins of floated elements do not collapse, no matter what they are next to.
+ Only the contents of elements following a floated element are affected by the floated element. That is, the backgrounds, margins, borders, padding, and width (the box model and dimensions) of elements following a floated element are not affected.
+ A floated element is always treated like a block element.

Each rule is important in determining how floated elements are positioned and rendered. When an element is floated, it takes on the behavior of a block element, with one major difference: Its sizing becomes shrink-to-fit horizontally and vertically unless you specify width and height properties. That means that if you float a <div> element, its dimensions change such that it only expands enough to accommodate the content within it. In post before, you learned that the default dimensions of a <div> element are expand-to-fit horizontally, meaning the <div> takes up the whole line, but not so when a <div> element is floated.

Elements within a floated container that are not themselves floated retain their original width unless a width is applied to them, e.g., a paragraph will still take up 100% of the space available to it. If no width had been set on the floated elements , the layout would have remained unchanged as the text in the paragraph and the list elements would have retained a width of 100% of the available space.

- Canceling Floated Content
In this section, I discuss a property intrinsically related to the float property: the clear property. The clear property is used to control floating content. The following code outlines the clear property and its possible values.

{clear none: | left | right | both;}
Initial value: none

The simplest explanation for the clear property is that it is used to cancel the effects of one or more
floated elements.

-# Float Bugs in IE 6
The following section takes a look at float bugs that arise in IE 6 and a few of the techniques you can use to work around these bugs. The bugs that I discuss here are as follows:

+ Peek-a-boo bug: As the name implies, this bug involves the use of floats where certain content on a page disappears and occasionally reappears.
+ Guillotine bug: This is another bug that comes up in IE when using floats, where content is cut in half.
+ Three-pixel jog: This bug causes 3 pixels of space to mysteriously appear when using floats in IE.
+ Double-margin bug: This bug causes the left or right margins of a floated box to double when using floats in IE.

Even though the following bugs are a problem in IE 6, all of them have been fixed in IE 7.

Read More:
CSS Floating and Vertical Alignment - Part 2