Floating Elements for Layout - Beginning CSS3 - page 130

When you float an element, it's removed from the normal document flow. Although it looks as though the
heading follows the image, it actually follows the preceding paragraph. Because the paragraph is too short
to flow around the image, the heading's top margin isn't big enough to fill the gap. so the browser adds just
enough extra to push it below the floated image. But it doesn't add the default margin as well. That's why the
gap between the image and the heading is only 3px . in fact, if the image didn't have a bottom margin, there
would be no gap at all.

To increase the gap, you would need to add a larger bottom margin to the image. one way to do so would
be to give the image an iD and create a special rule. or if you anticipate this happening frequently, you could
create a special class. A simpler solution would be to move the image or increase the amount of text.

While you still have the page open, right-click the paragraph alongside the image, and select Inspect
Element . notice how the highlighting of the paragraph's margins overlaps the image completely to the left,
as shown in Figure 7-11 .

Figure 7-11. The paragraph's margins are not affected by the floating image

What's happening is that the paragraph's content has been displaced by the float, but the block-level
box created by the paragraph still occupies its normal place. This has important implications for adding
backgrounds and borders to elements when floats are involved. i'll come back to those issues in Chapter 9 ,
which deals with borders in detail.

in the example shown in Figure 7-11 , the paragraph is the image's parent element, so it's perhaps not
surprising that the paragraph's box stretches the full width. But this behavior applies to all block-level
elements, except tables—which have a box model of their own. When a block-level element flows alongside
a floated element, its notional box occupies its normal place, and only the content is displaced. if it didn't,
there would be a 40px horizontal gap between the image and the second paragraph in Figure 7-5 , because
all paragraphs in the page have a 40px left margin.

■ A table's margins do not extend underneath a floated element. if a left-floated element has a right margin
of 10px , and a table with a left margin of 20px moves alongside, the gap between them is 30px because horizontal
margins don't collapse.

Note