Mainpage
Image #1
Image #2
Image #3
Now, imagine, there are several pictures, and there is always just a short description afterwards,
which should flow around the image. I just put the pictures in the page, and then add the
description after each image, and have the images with 
float:left; floating
on the left side of the container, right?
That does not look right, huh? The property float just means that everything that comes afterwards will
go around the image. Everything. We have to give another property to make elements stop flowing around,
and that is the property 'clear'. Let's take the same box as above again, with the images and the text,
and put that text Now, imagine, ...
in it's one box inside of the main box, and add the style
add clear:left; to it.
Image #1
Image #2
Image #3
float:left; floating
on the left side of the container, right?
clear:left; tells that text to not flow to anything on the left of it.
It could still flow to another image or div that will come afterwards, like a footer. If we don't want elements
to flow at all, then we use clear:both;. At first, I always use that,
unless I want it to flow to something specifically. Well, I am still not satisfied with the looks of
our little box, the descriptions are hanging all at the top, but at least the longer text behaves now. We have to put
the short image subtitles together with the image into a box:
Image #1
Image #2 - this description is a lot longer, and it should behave nicely, meaning it should flow around
the image, too. We still have the style float:left attached to the images, remember? The clear
property is attached to the boxes (the divs), not to the images (I used <div style="clear:both;"> for that).
You can also see that the boxes are just as tall as the text needs it, the images protrude at the bottom.
Image #3