The primary effect of the
float property couldn’t
be simpler to explain: an element to which it’s applied hews to the
nearest available margin suggested by that property’s value, and following
content flows around its element box instead of being
forced below it. The
clear property, on the other hand, negates the “flow-around”
float. These effects are
described visually in Figure 6-6.
Figure 6-6. A demonstration of the float and clear properties: (1) has a float value of left, (2) has a float value of none, and (3) has a clear value of left
That’s the theory, at least. The practice is another story. Because
float is the only presentation-specific
implementation technique that can be used to create variable-height
columnar page layouts in CSS 2.1, knowledge of
context is actually a vital item in any stylist’s toolbox.
To predict the behavior of an element to which a custom
float value has been applied, you need to understand
the rules that rendering engines follow.
The following is a brief discussion of rules explained in Sections 9 and 10 of the CSS 2.1 specification.
An element with a
Have a discrete width (whether expressed or implied) if the value is to be effective.
Appear entirely within the content block of its containing element, unless it is intrinsically wider or ...