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 ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.