Floating
If you’ve ever aligned an image to the right or left margin
and allowed text to wrap around it, then you understand the concept behind
floats in CSS. In fact, that is precisely the functionality that the
float property was created to provide.
The primary difference is that you can float any element with CSS
(paragraphs, lists, divs, and so on),
not just images.[*] It is important to note that floating is not a positioning scheme; it is a unique feature with
some interesting behaviors to be aware of, as discussed later in this
section.
Floats are useful for far more than just occasionally pushing an image off to one side. In fact, they are one of the primary tools used in modern CSS-based web design. Floats are used to create multicolumn layouts, navigation toolbars from unordered lists, table-like alignment without tables, and more. See Chapter 24 for examples.
To make an element float to the left or right and allow the
following text to wrap around it, apply the float property to the element.
[*] Some browsers allow table elements to be floated with the align attribute as well.
Get Web Design in a Nutshell, 3rd Edition 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.
