Long description of how floats overlap with boxes in normal flow

This diagram illustrates a floating image that overlaps the borders of two paragraphs in normal flow: the paragraph borders are clipped by the non-transparent parts of the image.

There are two paragraphs in normal flow, each surrounded by red border. A left-floating image causes the final three lines of the upper paragraph to float along its right side. It causes the first three lines of the following paragraph to do the same, and the remainder of that paragraph flows normally.

The paragraph borders shine through the margin area of the image box. The non-transparent part of the image content area clips them, however.

Return to image.