Test of Floating Elements

Here is a paragraph element, containing a non-floated inline IMG element. The image appears inline with the text, and sticks up above the top line (as per the default text-alignment).

Here is a paragraph element, containing a floated IMG element - the element is floated to the left. Note how the image is flush with the left edge of the paragraph it lies within, that the top of the image aligns with the top of the paragraph box, and that the text flows around the image.

Here is a similar paragraph with the same floated image, but this time with padding added to the image. Note how the padding "pads out" the region around the image, and displaces the adjacent paragraph content. A border would have the same effect.

Here is a similar paragraph with the same floated image, but now the image has negative top and left margins. this pulls the image outside the bounds of the parent element.

Here is a similar paragraph with the same floated image, but now the image has negative bottom and right margins. this pulls the bounding box in, and pulls the text boundaries right under the floated image.