Chapter 5
You can see the results in Figure 5-16; the image floats to the left side of the paragraph and the following
text flows upward around it.
Figure 5-16. The image floats to the left, allowing the text to wrap around it
An inline image rests on the same baseline as its neighboring text, but when that image floats to one side,
its top edge now rests at the top of the line it appears on, descending below the baseline. In the previous
example, you’ll notice that the wrapped text rubs directly against the right edge of the image, making it
harder to read. To create a bit of spacing, you can apply margins to the floating image:
.avatar {
float: left;
margin-right: 1em;
margin-bottom: .5em;
}
Only the right and bottom sides need margins in this case because the top and left sides don’t collide with
any text. Leaving those sides with the default margin value of 0 will make those edges press right against
the invisible edge of the containing paragraph. You can see in Figure 5-17 that the floating image now has
a bit more room to breathe; the margins extend the influence of the image’s float, and the text now wraps
around the margins as well.
Figure 5-17. Applying some margins to the floating image separates it from the text
You can float almost any element in HTML, not only images. For instance, a “pull quote” in an article:
Power Outfitters Superhero Costume and Supply Company is located
in a nondescript building on Kirby Ave, a site that once housed a
large printing plant. Behind their modest storefront is an expansive
warehouse positively packed to the portholes with paraphernalia.