CSS float:right; does the same job as HTML align="right".
Basically, what it does is to remove the object (it doesn't have to be an image) from its usual position (a bit like position:relative; does) and moves it to the right until it bumps up against either the edge of the containing element or another floated element.
The object is now removed from the normal flow of the text. Text will, however, flow around the object -- as long as it can break the lines at convenient places. If it can't, then it has no choice but to appear superimposed over the floated object.
If you didn't float the object, and the object was too wide, it would force horizontal scrolling. But that's because the object would be part of the text flow itself. Once you float it, it's taken out of the flow.
The cure is to make sure that your images aren't too wide for the containing element and the text that has to flow around it. If, at 800x600, there is not enough room for about five or six average-length words on one line (this is a guesstimate), you will need to either reduce your image or widen the containing element. Or find some other solution.