This is a short lesson, which tells you about float and clear. The float keyword makes text wrap around the element to which it has been applied. Like this!

Float:left

The header right there has float:left applied to it, as well as some padding around it. This results in there being more space below the header that this paragraph can wrap around. You can also have float:right and the header will be on the right side of this paragraph.

This paragraph may also start beside the header. If you don't want this, just use the keyword clear:left. This tells the browser to make sure there's no floating stuff to the left of the element before displaying it - there can still be stuff on the right when clear:left is set, and vice versa for clear:right. To make sure there's nothing on either side of the element, set clear:both. Unfortunately, the design of my web page will not allow the use of the clear attribute. It pushes the element below any floated elements, and my navigation bars are floated, so anything I clear will go below them. There is, however, something of a workaround to this little quirk. Simply do what clear does yourself: increase the top until the element is where you want it to be, like so:

Float:left

Float:right

This paragraph has margin-top:2em applied to it, which makes it look identical to what it would look like if 1) that header was the only left floated element on the page, and 2) this paragraph had clear:left applied to it. I used ems because they scale with text size; if you don't use a scalable unit, then someone can increase their text size and it will probably begin wrapping around the element you wanted to clear at some point. Anywho, it starts below the float:left header, but wraps around the float:right header. Had I set clear:both (i.e., increasing the margin enough to clear the right header as well), it would have gone below even the right header. And had I set clear:right (again, increasing the top margin to clear only the right header), it would have gone below the right header. And if there was a floating element big enough on the left, it would have wrapped with it!