HTML and CSS Reference
Figure 7-14. The <gure> breaks out, even though it is nested inside the paragraph
To understand why, you need to use the browser's developer tools again. When you inspect the HTML in
a browser's developer tools, you're not looking at the page's source code, but at the markup generated by the
browser. Figure 7-15 shows the HTML Safari generates when the page is rendered.
Because <figure> is flow content—in other words, a block-level element—Safari has automatically closed the
opening <p> tag (highlighted in Figure 7-15 ). he <figure> and the following text are then rendered outside the
paragraph. Finally, an opening <p> tag is inserted to match the closing one (also highlighted in Figure 7-15 ).
All modern browsers render the HTML the same way. As a result, when the <figure> element is floated to the
left, its parent element is the <body> , not the paragraph that it was incorrectly nested inside. That's why the image
and its caption are no longer left-aligned with the paragraphs.