How float works

In a printed magazine, a photo often sits at the left edge of a column, and the lines of text beside it are shorter so that they run down the photo's right side. Below the photo, the lines return to the full width of the column. CSS produces the same arrangement with the float property.

float: left;
float: right;
float: none;

float: left moves a box to the left edge of its container, and float: right moves it to the right edge. The lines of text that follow the box run along its other side. float: none is the default and means the box is not floated.