Floats

Illustrating Float and Clear

Although this page illustrates the use of the float property and the clear property, there are now better ways to accomplish most jobs for which it was formerly used. One thing for which you may use float is to place an image within a paragraph and have the image situated on the left or right of the text with the text flowing around the image. In the style section, we have defined the class pictbox as floating right: .pictbox {float: right}. I have made the image small so that there is enough text to flow around the image as planned.I suspect you are asking, "what happens if there are two float boxes in a row?" We will find out by reproducing this paragraph exactly except for putting two float boxes with images one after the other. The HTML code used for the two images is: <img src="schoolhouse.jpg" width= "100%"><img src="windmill.gif" width= "100%">

Although this page illustrates the use of the float property and the clear property, there are now better ways to accomplish most jobs for which it was formerly used. One thing for which you may use float is to place an image within a paragraph and have the image situated on the left or right of the text with the text flowing around the image. In the style section, we have defined the class pictboxR as floating right: .pictboxR {float: right}. I have made the image small so that there is enough text to flow around the image as planned.I suspect you are asking, "what happens if there are two float boxes in a row?" We will find out by reproducing this paragraph exactly except for putting two float boxes with images one after the other. The HTML code used for the two images is: <img src="schoolhouse.jpg" width= "100%"><img src="windmill.gif" width= "100%">. As could have been expected, the second float-right image box cannot go all the way to the right since the first image box already occupies that space. What would happen if we put the second image in a picboxL that we define as float-left?

These first words are unimportant and are here merely to occupy space and result in the text surrounding the image boxes or at least beginning to do so. XXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXX XXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX XXXX XXXX XXXXXX XXXX XXXX XXXXXXX XXXXXXX XXXX XXXXX XXXXXX XXXXXXXXXXXXXXXX XXX XXXX XXXXXX XXXXX XXXXX. The first image box is still situated at the right of the paragraph area, but, now, the second image box, defined as float-left goes as far left in the paragraph area as it can be.

Assume we have put only one image into our paragraph but want to put a second image a bit further down in the paragraph. We want both images to be as far as possible to the left or to the right. Since our first image, the schoolhouse, is on the right, we will put the second, the windmill, on the right also. XXXX XXXXX XXXXXXXXXXX XXXXX XXXXXX XXXX XXX XXXXX XXXXXX XXXX XXXXXX XXXXX XXXX XXXXXX XXXXXX XXXXX XXXXXX XXXXXX XXXX XXXX. XXXXXX XXXXX XXXXXX XXXXXX XXXX XXXX. XXXXXX XXXXX XXXX XXXXXX XXXXXX XXXXX XXXXXX, XXXXXX XXXXX XXXX XXXXXX XXXXXX XXXXX XXXXXX. The first image box is still situated at the right of the paragraph area, and, now, the second image box, also defined as float-right but located far enough below the first not to overlap it is also to the far right of the paragraph.

There is a clear property associated with the float property, but I find it useless in most cases. Defining .boxClear {clear: left; width: as desired, a few pixels is adequate unless you want this box to hold text or an image} and using it with the HTML code <iv or span class= "boxClear"> prevents this element and any following element from floating left in the current area. Left can be replaced by right, of course, and replacing left or right with both prevents this element and following element from floating right or left.

I used floats and clears in making an internet calendar many years ago, but there are much simpler ways to make a calendar today.