float attribute

Type:	"none", "left" or "right"
Inherited:	no
Used By:	All block elements
See:	clear display

The float attribute is normally used in conjunction with the display and clear attributes to control how a normally "block" element is positioned when it's display attribute is set to "inline". The value can be set to "left" to move the block to the left or right of the current line, causing any subsequent content in the paragraph to "wrap around" the element.

Setting the float attribute to a value other than "none" causes the display attribute to automatically be set to "inline".

This shows a paragraph with an image in the top-left corner - the text of the paragraph will flow around it.

<p>
  <img float="left" display="inline" src="image.jpg"/>
  This text will wrap around the image
</p>

This shows a paragraph with an image in the top-left corner and another image to the right of it.

<p>
  <img float="left" display="inline" src="image1.jpg"/>
  <img float="left" display="inline" src="image2.jpg"/>
  This text will wrap around the images, which are placed next to eachother
</p>

This shows a paragraph with an image in the top-left corner and another image below it.

<p>
  <img float="left" display="inline" src="image1.jpg"/>
  <img float="left" clear="left" display="inline" src="image2.jpg"/>
  This text will wrap around the images, which are placed one below the other
</p>