DM 171: Floats

float

Floating elements is another way of positioning them. float values are left, right, inherit, and none with none being default.

Floating Images

Floating was originally designed to replace the align element in images which allowed an image to sit off to the side of a page and allows text and other content to wrap around it. On this page, you will see a first example image that is aligned left with 15 pixels of vspace and hspace. The second image is floated with 15 pixel top, right, and bottom margins.

Notice that the symetrical manner in which vspace and hspace are applied spoils the left hand alignment, the floated image is able to maintain it.

Floating Other Elements

The align attribute could also be used to align tables and such; it was found that the float property could be used on other elements too. Interestingly, if a floated text element was given a width, it formed a column. This became the basis for float based layouts which is reasonably reliable across all browsers.

clear

If you use the float property, you will end up needing the clear property for something else. The clear property is analgous to the <br clear="all" /> tag that is used to clear an aligned image. The clear property may have values of left, right, both, inherit, or none.