CSS Floats: Rule 6

A floating element's top may not be higher than the top of any line box containing a box generated by an element that comes earlier in the document.

This rule is similar to rules 4 and 5, but applied to floating line boxes instead of floating block–level elements, and places a cap on how high a floated element within an inline context may be placed with respect to the line box containing it. In essence, once the browser encounters the floated image within the paragraph, it calculates a position to place the image, and it will either go on the line where it appears, if there is enough space, or on the next line.

A more detailed explanation follows.

Note the graphic in the lower right hand corner. This right-floated, 300 × 300 pixel image appears after the word “freedom” (highlighted below in yellow and red) in the source code within the first sentence. In order to render the content—displayed in green—along the left side of the floated image in the viewport, the browser first needs to calculate the size of the floated block containing the image so it can subtract that size from the parent block's width. The calculated space to the left of the floated image is where the content will be rendered.

There are only two options where the floated element containing the image can be rendered once its available space has been determined by the browser: on the same line as the content that precedes it in the source code, or on the next line below it. For the image to float up to the top margin of the same line on which it appears in the source, there must be enough space to accommodate the floated image and at least the content leading up to it.

This isn't the case in the example below. The additive width of the ninety-three characters—including spaces—between the opening paragraph tag and the appearance of the floated image inside the image tag is about 611 pixels. The floated image itself is 300 pixels wide. The sum of their widths exceeds the width of their parent, and, as such, cannot be placed on the same line, per rule 7. Therefore, the second option, discussed below, is exercised by the browser.

If there isn't enough space to render both the content and the floated element on the same line, then the floated item will be placed on the second line, rendering any remaining content on the first line and filling the entire width of the parent.

The GNU project supports the mission of the FSF to preserve, protect and promote the freedom to use, study, copy, modify, and redistribute computer software, and to defend the rights of Free Software users. We support the freedoms of speech, press, and association on the Internet, the right to use encryption software for private communication, and the right to write software unimpeded by private monopolies. You can also learn more about these issues in the book Free Software, Free Society.