Here is a paragraph of text and a floated image. The floated image moves up as high and to the left as it can within the parent element, body. With the image removed from of the document flow because it is floated, the paragraph (which is not floated) can also occupy the top left corner along with image, as the paragraph's red border shows. However, the paragraph's text wraps around the image to the right, because the image is floated left. Once the text gets below the image, it returns to its normal width. The floated element must appear directly before, or nested at the start of, the non-floated element in the markup for this effect to work.