HTML & CSS: The Good Parts

The float and clear Properties

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” effects of 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 float context is actually a vital item in any stylist’s toolbox.

The Rules of the float Property

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.

Note

The following is a brief discussion of rules explained in Sections 9 and 10 of the CSS 2.1 specification.

An element with a float value of left or right must:

• 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 ...