Float Left
This does pretty much as the name implies. By using float: left on something, it puts that something to the left and allows text to wrap around it. Apply a margin to the sides that meet up with text in order to get the desired spacing between the image and the text. Float Right below works exactly the same way.
Float Right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Float Left, Clear Left
As you can see, by adding clear:left to the element following the left floated item, in this case a h1 tag, I stop the text from wrapping around the floated object. Clearing the right with a right floated object works the exact same way. You may be scratching your head trying to figure out why you would do this. Keep going down and I'll show you.
Float Right, Clear Right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2 floated Images
Without clearing anything, if you float an image right, and then float another image right, they'll line up horizontally until the width of the containing element is reached, then it will drop down a line. This is often used for elements like unordered lists being used for navigation. However, as you can see here, this effect isn't always desired. So we can add clear: right to the second floated image in order to have it show up below the first floated image.
2 floated Images, clear right on second image, clear both at the bottom
Much better. I added clear right to the second image in order to have them both floated to the right, but not side by side. If you look at my code you'll see that I have 2 classes listed on the class tag. This is a bonus of using classes. You can apply multiple classes to an element. This one is also special because following the copy I have an empty div with clear:both applied to it. Since a floated item is outside the flow of containing element, if the floated item takes up more height than everything else in that container, then the floated item will over hang the container. So by following up everything with a clear:both, I ensure that the container won't close until all the floats are cleared.