Why do block elements go behind a float and inline go around?

Question

I am finally starting to understand floats in CSS but I am stuck on one part.

I understand floating an element takes it out of the flow of the document so elements after it would render 'underneath' it as it is not visible to them.

However I am having difficulty understanding why inline elements are aware of the float and flow around it if it has been taken out of the document flow?

Answer 1

Why inline elements flow around float?

From MDN:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

float origins:

The practice of flowing text around an image goes back a long, long time. That's why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float.

Complex Spiral Consulting

So float was designed to solve this particular problem:

Consider This figure:

And the markup structure that produced it:

<p>
 ...text...
 <img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
 ...text...
</p>
<p>
 ...text...
</p>

The floated image is sticking out of its containing element. We can see this more clearly by adding borders to the paragraphs:

Using float makes it possible for the paragraphs to ignore the image, while the text wrap around it.

Answer 2

There are rules governing the relationship between floated elements, block elements and line boxes.

These rules are defined in the CSS Visual Formatting Model.

In particular, note this section from the specification:

The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float's presence, but resume their "normal" width (that of the containing block established by the P element) after the float.

In other words, block boxes, such as a p, will flow behind the floated element. But the line boxes in the p, which wrap the text, respect the presence of the floated element. These are just the rules, as defined in the spec.